In-depth analysis of jquery parsing json data _ jquery

This article mainly analyzes jquery's method of parsing json data in depth, which is very detailed. If you need it, please refer to the following section. We will take parsing the JSON data of the comments object in the above example as an example, then, we will summarize the method for parsing JSON data in jQuery.

JSON data is a nested JSON:

The Code is as follows:

{"Comments": [{"content": "pretty good", "id": 1, "nickname": "Nana" },{ "content ": "", "id": 2, "nickname": "Xiaoqiang"}]}

To obtain JSON data, there is a simple method $. getJSON () in jQuery.

The following describes $. getJSON () of the official API:

JQuery. getJSON (url, [data,] [success (data, textStatus, jqXHR)])

UrlA string containing the URL to which the request is sent.

DataA map or string that is sent to the server with the request.

Success (data, textStatus, jqXHR) A callback function that is executed if the request succeeds.

The callback function accepts three parameters, the data returned by the first book, the second is the state, and the third is the XMLHttpRequest of jQuery. We only use the first parameter.

$. Each () is used to parse JSON data in the callback function. The following is an official document:

JQuery. each (collection, callback (indexInArray, valueOfElement ))

CollectionThe object or array to iterate over.

Callback (indexInArray, valueOfElement) The function that will be executed on every object.

$. The each () method is followed by two parameters. The first is the object set to be traversed (the JSON object set), and the second is the Traversal method. This method accepts two parameters, the first is the index to be traversed, and the second is the value to be traversed before. Haha, with the $. each () method JSON resolution, you can solve it easily. (* ^__ ^ *) Xi ......

The Code is as follows:

Function loadInfo (){
$. GetJSON ("loadInfo", function (data ){
$ ("# Info" pai.html (""); // clear info content $. each (data. comments, function (I, item ){
$ ("# Info"). append (
"

"+ Item. id +"

"+
"

"+ Item. nickname +"

"+"

"+ Item. content +"

");
});
});
}

As above, loadinfo is the request address, function (data ){...} is the callback function after the request is successful. data encapsulates the returned JSON object, in the following $. each (data. comments, function (I, item ){...}) data. comments directly reach the JSON array contained in the json data package:

The Code is as follows:

[{"Content": "Great", "id": 1, "nickname": "Nana" },{ "content": "", "id": 2, "nickname": "Xiaoqiang"}]

The function in the $. each () method traverses the array and inserts the DOM into a proper place. During the traversal process, we can easily access the current traversal index ("I" in the Code) and the current traversal value ("item" in the Code).

The running result of the preceding example is as follows:

If the returned JSON data is complex, you only need to traverse more $. each. For example, JSON data is as follows:

The Code is as follows:

{"Comments": [{"content": "pretty good", "id": 1, "nickname": "Nana" },{ "content ": "", "id": 2, "nickname": "Xiaoqiang"}],
"Content": "You are a wood man, haha. "," Infomap ": {" gender ":" male "," Occupation ":" programmer ",
"Blog": "http: \/www.xxx.com \/codeplus \/"}, "title": "123 Wood Man "}

Js:

The Code is as follows:

Function loadInfo (){
$. GetJSON ("loadInfo", function (data ){
$ ("# Title"). append (data. title +"

");
$ ("# Content"). append (data. content +" ");
// Jquery parses map data
$. Each (data. infomap, function (key, value ){
$ ("# Mapinfo"). append (key + "----" + value +"
");
});
// Parse the Array
$. Each (data. comments, function (I, item ){
$ ("# Info"). append (
"

"+ Item. id +"

"+
"

"+ Item. nickname +"

"+
"

"+ Item. content +"

");
});
});
}

It is worth noting that when $. each () traverses the Map, the parameters in function () are key and value, which is very convenient.