JSON tutorial, json tutorial
JSON tutorial
Note:
You can use the Baidu JSON parser to check whether the JSON you have written is correct.
Refer:
JSON tutorial
Http://www.w3school.com.cn/json/index.asp
JSON tutorial | cainiao tutorial
Http://www.runoob.com/json/json-tutorial.html
JSON: JavaScript Object Notation (JavaScript Object Notation ).
JSON is the syntax for storing and exchanging text information. Similar to XML.
JSON is smaller, faster, and easier to parse than XML.
Examples used in each chapter{"employees": [{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName":"Carter" }]}
This employee object is an array containing three employee records (objects.
What is JSON?* JSON usageJavaScript syntaxTo describe the data object, but the JSONIndependent from languages and platforms. The JSON parser and JSON library support many different programming languages.
JSON-convert to JavaScript ObjectThe JSON text format is syntactically the same as the code used to create JavaScript objects.
Because of this similarity, there is no need for a parser. JavaScript programs can use built-in eval () functions to generate native JavaScript objects using JSON data.
Try it yourself-instance
With our editor, you can edit JavaScript code online and click a button to view the result:
<Html> <body> var JSONObject= {"name":"Bill Gates","street":"Fifth Avenue New York 666","age":56,"phone":"555 1234567"};Document. getElementById ("jname "). innerHTML = JSONObject. namedocument. getElementById ("jage "). innerHTML = JSONObject. agedocument. getElementById ("jstreet "). innerHTML = JSONObject. streetdocument. getElementById ("jphone "). innerHTML = JSONObject. phone </script> </body>
Try it yourself
Similar to XML
For AJAX applications, JSON is easier to use than XML:
Use XMLJSON syntax is a subset of JavaScript syntax.
JSON syntax rules
JSON syntax is a subset of the syntax of JavaScript Object Notation.
JSON data is written in the format of name/value pair.
Name/value pair includes the field name (in double quotation marks), followed by a colon, followed by a value:
"firstName" : "John"
This is easy to understand. It is equivalent to this JavaScript statement:
firstName = "John"JSON Value
The JSON value can be:
JSON objects are written in curly brackets:
The object can contain multiple name/value pairs:
{ "firstName":"John" , "lastName":"Doe" }
This is easy to understand and is equivalent to this JavaScript statement:
firstName = "John"lastName = "Doe"JSON Array
JSON array is written in square brackets:
An array can contain multiple objects:
{"employees": [{ "firstName":"John" , "lastName":"Doe" },{ "firstName":"Anna" , "lastName":"Smith" },{ "firstName":"Peter" , "lastName":"Jones" }]}
In the preceding example, the object "employees" is an array containing three objects. Each object represents a record about someone (with a surname and a name.
JSON uses JavaScript syntaxBecause JSON uses JavaScript syntax, JSON in JavaScript can be processed without additional software.
With JavaScript, you can create an array of objects and assign values as follows:
Examplevar employees = [{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName": "Carter" }];
You can access the first entry in the JavaScript Object array as follows:
employees[0].lastName;
The returned content is:
Gates
You can modify the data as follows:
employees[0].lastName = "Jobs";
Try it yourself
In the following sections, you will learn how to convert JSON text into JavaScript objects.
JSON File
Converts JSON text to JavaScript objects.
One of the most common usage of JSON is to read JSON data (as a file or as HttpRequest) from the web server, convert JSON data into JavaScript objects, and then use the data on the web page.
To make it easier for you, we use strings as input for demonstration (rather than files ).
JSON instance-object from stringCreate a JavaScript string containing the JSON Syntax:
var txt = '{ "employees" : [' +'{ "firstName":"Bill" , "lastName":"Gates" },' +'{ "firstName":"George" , "lastName":"Bush" },' +'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';
Because the JSON syntax is a subset of JavaScript syntax, the JavaScript function eval () can be used to convert JSON text to JavaScript objects.
The eval () function uses a JavaScript compiler that parses JSON text and generates JavaScript objects. Text must be enclosed in parentheses to avoid syntax errors:
var obj = eval ("(" + txt + ")");
Use JavaScript objects on a webpage:
Example<p>First Name: <span id="fname"></span><br />Last Name: <span id="lname"></span><br /></p><script type="text/javascript">document.getElementById("fname").innerHTML = obj.employees[1].firstNamedocument.getElementById("lname").innerHTML = obj.employees[1].lastName</script>
Try it yourself
JSON parserTip: the eval () function can compile and execute any JavaScript code. This hides a potential security issue.
It is safer to use the JSON parser to convert JSON into JavaScript objects. The JSON parser can only recognize JSON text, rather than compile scripts.
In the browser, this provides native JSON support, and the JSON parser is faster.
Newer browsers and the latest ECMAScript (JavaScript) standards all contain native support for JSON.
| Web browser support | Web software support |
|---|---|
|
|
Try it yourself
For older browsers, you can use the JavaScript Library: https://github.com/douglascrockford/JSON-js
The JSON format was originally developed by Douglas Crockford.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
