The best way to convert JSON string into JSON object in js

The best way to convert JSON string into JSON object in js_javascript skills

WBOY

Release： 2016-05-16 16:54:46

Original

1650 people have browsed it

There are generally two ways to parse JSON strings into JSON data format in JS:
1. One is to use the eval() function.
2. Use Function object to perform return analysis.

The first parsing method: use the eval function to parse, and use jQuery's each method to traverse
Use jQuery to parse JSON data, as the transmission object of jQuery asynchronous request, returned after jQuery request The result is a json object. What is considered here is the string returned by the server in JSON form. For JSON objects encapsulated by plug-ins such as JSONObject, the process is similar and will not be explained here.
The JSON string set is first given here. The string set is as follows:

Copy code The code is as follows:

var data = " {
root:
 [
 {name: '1', value: '0'},
 {name: '6101', value: 'Beijing'} ,
 {name: '6102', value: 'Tianjin'},
 {name: '6103', value: 'Shanghai'},
 {name: '6104', value: ' Chongqing City'},
 {name: '6105', value: 'Weinan City'},
 {name: '6106', value: 'Yan'an City'},
 {name: '6107' , value: 'Hanzhong City'},
 {name: '6108', value: 'Yulin City'},
 {name: '6109', value: 'Ankang City'},
 {name : '6110', value: 'Shangluo City'}
 ]
}
";

Here are based on the data types obtained asynchronously by jQuery - json objects and strings, respectively. Introduce the processing methods of results obtained in two ways.
1. For the JSON string returned by the server, if the jQuery asynchronous request does not specify the type, or accepts it as a string, then it needs to be objectified. The method is not too troublesome, that is, put the string in eval () is executed once. This method is also suitable for obtaining json objects in the ordinary JavaScript method. The following example illustrates:

Copy code The code is as follows:

var dataObj = eval("(" data ")"); // Convert to json object

Why do you need to add "("(" data ")");" to eval? ?
The reason is: the problem of eval itself. Since json starts and ends with "{}", it will be processed as a statement block in JS, so it must be forced to be converted into an expression.
The purpose of adding parentheses is to force the eval function to convert the expression in the parentheses into an object instead of executing it as a statement when processing JavaScript code. For example, take the object literal {}. If no outer brackets are added, then eval will recognize the braces as the beginning and end marks of the JavaScript code block, and {} will be considered to execute an empty statement. So the following two execution results are different:

Copy the code The code is as follows:

alert( eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

For this writing method, in JS, you can See it everywhere.
For example: (function(){})(); When doing closure operations, etc.

Copy code<.> The code is as follows:

alert(dataObj.root.length);//Output the number of sub-objects of root

$.each(dataObj.root, fucntion(idx, item) {
if (idx == 0) {
return true;
}
//Output the name and value of each root sub-object

alert("name:" item.name ",value:" item.value);
})

2. For the JSON string returned by the server, if the jQuery asynchronous request sets the type (usually this configuration attribute) to "json", or uses the $.getJSON() method to obtain the server return, then the eval() method is not needed. Because the result obtained at this time is already a json object, you only need to call the object directly. Here, the $.getJSON method is used as an example to illustrate the data processing method:

Copy code The code is as follows:

$.getJSON("http://blog.snsgou.com/", {param: "snsgou"}, function (data) {
 // The data returned here is already a json object
 // The following other operations are the same as the first case 
 $.each(data.root, function (index, item) {
 if (index == 0) {
 return true; // Same as countinue, Returning false is the same as break
 }
 alert("name:" item.name ",value:" item.value);
 });
});

This is special It should be noted that the eval() method in method 1 dynamically executes the string (possibly a js script), which can easily cause system security issues. Therefore, you can use some third-party client script libraries that circumvent eval(). For example, JSON in JavaScript provides a script library of no more than 3k.

The second parsing method: Use Function object to complete. Its typical application is the parsing of the returned data such as success under the AJAX method in jQuery

Copy code The code is as follows:

var json='{"name":"CJ","age":18}';

data =(new Function("", "return " json))();

The data at this time is a json object that will be parsed.

The final conclusion is:
json string to json object, use (new Function("return " jsonString))(); instead of eval('(' jsonString ')') ;