js uses eval to parse json (use json in js)_javascript skills

Let’s talk about the usage of eval first. The content is relatively simple. Those who are familiar with it can skip it.
The eval function receives a parameter s. If s is not a string, it returns s directly. Otherwise, execute the s statement. If the execution result of the s statement is a value, this value is returned, otherwise undefined is returned. It is important to note that the object declaration syntax "{}" cannot return a value. It needs to be enclosed in parentheses to return a value. A simple example is as follows:

Copy code The code is as follows:

var s1='"a" 2'; // Expression
var s2='{a:2}'; //Statement
alert(eval(s1)); //->'a2'
alert(eval(s2)); / /->undefined
alert(eval('(' s2 ')')); //->[object Object]

As you can see, the object declaration statement is only executed and cannot return a value.

In order to return a commonly used object declaration statement such as "{}", it must be enclosed in parentheses to convert it into an expression before its value can be returned. This is also one of the basic principles of using JSON for Ajax development. It can be clearly seen in the example that the second alert statement outputs undefined, while the third one after adding parentheses outputs the object represented by the statement.
Now let’s talk about the focus of this article, how to execute global code within a function. To illustrate this problem, let’s look at an example:

Copy code The code is as follows:

var s='global'; //Define a global Variable
function demo1(){
eval('var s="local"');
}
demo1();
alert(s); //->global

It is easy to understand. The above demo1 function is equivalent to: function demo1(){var s='local';}, which defines a local variable s.
So it is not surprising that the final output is global. After all, everyone can clearly distinguish between local variables and global variables.
If you experience it carefully, you can find the characteristics of the eval function. It is always executed within the context variable space (also called: package, closure) where it is called. This is true whether it is a variable definition or a function definition, so as follows The code produces an undefined function error:

Copy code The code is as follows:

var s='function test(){return 1; }'; //A function definition statement
function demo2(){
eval(s);
}
demo2();
alert(test()); //-> ;error:test is not defined

This is because the test function is defined in the local space and can be accessed within the demo2 function, but cannot be accessed from outside.

Share: Points to note when using JS’s eval to parse JSON
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.

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, the result returned after jquery request is json object. What is considered here is the form of string returned by the server in JSON form. For encapsulation using plug-ins such as JSONObject The JSON object is similar to this 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 City'},
{name:'6103',value:'Shanghai City'},
{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' }
]
}";

Based on the data types obtained asynchronously by jquery - json objects and strings, here we introduce the processing methods of the results obtained in the two ways.

1. For the JSON string returned by the server, if the jquery asynchronous request does not have a type description, or is accepted 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 using ordinary javascipt. The following is an example:

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, if the object literal {} is not added with outer brackets, then eval will recognize the braces as the start 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]

This kind of writing can be seen everywhere in JS.

For example: (function()) {}(); When doing closure operations, etc.

Copy code The code is as follows:

alert(dataObj.root.length);//output Number of child 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);
})

Note: For general js to generate json objects, you only need to replace the $.each() method with a for statement, and the others remain unchanged.

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 there is no need to eval ( ) method, 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://www.xx.cn/",{param:"gaoyusi"} ,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(idx,item) {
if(idx==0){
return true;//Same as countinue, return false the same as break
}
alert("name:" item.name ",value:" item. value);
});
});

What needs special attention here is 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 is to use Function objects. Its typical application is the parsing of 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 into a json object