In-depth introduction to JSON, online json Parsing

Source: Internet
Author: User
Tags javascript array

In-depth introduction to JSON, online json Parsing

JSON is a strict subset of JavaScript and uses some JavaScript patterns to represent structured data.


I. JSON syntax

JSON and XML are both structured data representations. Therefore, JSON is not a unique data format in JavaScript. JSON can be parsed and serialized in many other languages.

JSON syntax can represent three types of values:

  • 1. Simple value: it can represent strings, values, Boolean values, and null in JSON. JSON does not support special undefined values in JavaScript.
  • 2. Object: as the name suggests.
  • 3. array: as the name suggests.

Simple Value

100 and "Lee" are the JSON representation. One is a JSON value and the other is a JSON string. Boolean values and null values are also valid. However, objects or arrays must be combined in actual use.


Object

JavaScript literal representation:

var box={ name:'Lee', age:100 };

The Object Notation in JSON requires double quotation marks, and there is no value assignment or semicolon:

{"Name": "Lee", // use double quotation marks. Otherwise, an error occurs during conversion. "age": 100}


Array

JavaScript array literal representation:

var box=[100,'Lee',true];

The array representation in JSON also has no variable assignment or semicolon:

 [100,"Lee",true]

A common complex form is the combination of arrays and objects:

 [ { "title":"a", "num":1 }, { "title":"b", "num":2 }, { "title":"c", "num":3 } ]

PS: in general, we can save the JSON structure data to a text file, and then load it through the XMLHttpRequest object to obtain this string of structured data. Therefore, we can simulate this process.

Simulate loading the data of the JSON text file and assign the value to the variable.

var box='[{"name":"a","age":1},{"name":"b","age":2}]';

PS; the short code above simulates the var box = load ('demo. json'); Value assignment process. Because the text file loaded by load must be a string no matter what the content is. Therefore, double quotation marks must be added on both sides.

In fact, JSON is a double quotation mark (") that has two sides more than an ordinary array. The common array is as follows:

var box=[{name:'a', age :1},{name:'b', age :2}];


Ii. parsing and serialization

If it is a loaded JSON file, we need to use it, then we must parse the JSON string into the native JavaScript value. Of course, if it is a native JavaScript Object or array, it can also be converted into a JSON string.

For parsing JSON strings into JavaScript native values, the eval () function was used in the early days. However, this method is neither secure nor may execute malicious code.

Var box = '[{"name": "a", "age": 1 },{ "name": "B", "age": 2}]'; alert (box); // JSON string var json = eval (box); // use the eval () function to parse alert (json); // obtain the JavaScript native Value

ECMAScript5 standardizes the JSON parsing behavior and defines the Global Object JSON. Browsers that support this object include IE8 +, Firefox3.5 +, Safari4 +, Chrome and Opera10.5 +. Unsupported browsers can also be simulated using an open source library json. js. The JSON object provides two methods: one is to convert the native JavaScript value to the JSON string: stringify (), and the other is to convert the JSON string to the JavaScript native value: parse ().

Var box = '[{"name": "a", "age": 1 },{ "name": "B", "age": 2}]'; // note that the key must use double quotation marks alert (box); var json = JSON. parse (box); // if it is not a double quotation mark, alert (json) is returned; var box = [{name: 'A', age: 1}, {name: 'B ', age: 2}]; // JavaScript native value var json = JSON. stringify (box); // convert to the JSON string alert (json); // auto double quotation marks

The stringify () method also provides the second parameter during JSON serialization. The first parameter can be an array or a function used to filter the results. The second parameter indicates whether the data is retained in the JSON string.

var box=[{name:'a', age :1,height:177},{name :'b', age:2,height:188}]; var json= JSON.stringify(box,['name', 'age'],4); alert(json);

PS: if you do not need to retain indentation, leave it empty. If you do not need to filter the results, but want to retain indentation, set the filter result parameter to null. If you use a function, you can perform complex filtering.

Var box = [{name: 'A', age: 1, height: 177}, {name: 'B', age: 2, height: 188}]; var json = JSON. stringify (box, function (key, value) {switch (key) {case 'name': return 'Mr. '+ value; case 'age': return value + 'Year'; default: return value ;}, 4); alert (json );

PS: Reserved indentation is not only a common number, but also a character.

Another method is to customize data filtering. The toJSON () method can be used to specify a specific value in a group of objects.

var box=[{name:'a', age :1,height:177,toJSON :function(){ return this.name; }},{name:'b',age :2,height:188,toJSON :function(){ return this.name; }}];var json= JSON.stringify(box); alert(json);

PS: we can see that the serialization also has the execution order. First, the toJSON () method is executed. If the second filter parameter is applied, this method is executed. Then, the serialization process is executed, for example, a key-value pair is a legal JSON string, such as double quotation marks. If indentation is provided, the indent operation is performed again.

The parse () method for parsing JSON strings can also accept the second parameter, so that you can replace it with the desired value when restoring the JavaScript value.

var box='[{"name":"a","age":1},{"name":"b","age":2}]'; var json= JSON.parse(box,function(key,value) { if(key =='name') { return 'Mr.'+value; }else{ return value; } }); alert(json[0].name);

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.