Parse JSON data using jQuery

In the previous analysis of the Ajax development instance in Struts2, we obtained the JSON data of the comments object. In this article, we will use jQuery for data parsing.

Let's take parsing the JSON data of the comments object in the previous example as an example, and then summarize the method for parsing JSON data in jQuery.

The JSON data obtained in the preceding example is a nested JSON:

 
 

  
  
{"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 accepts two parameters. The first is the object set to be traversed (the JSON object set), and the second is the Traversal method. This method also accepts two parameters, the first is the traversal index, and the second is the current traversal value. Haha, with the $. each () method JSON resolution, you can solve it easily.

 
 

  
  
Function loadInfo (){
  
  
$. GetJSON ("loadInfo", function (data ){
  
  
$ ("# Info" ).html (""); // clear info content
  
  
$. Each (data. comments, function (I, item ){
  
  
$ ("# Info"). append (
  
  
"<Div>" + item. id + "</div>" +
  
  
"<Div>" + item. nickname + "</div>" +
  
  
"<Div>" + item. content + "</div>  
  
});
  
  
});
  
  
}
 
 

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:

 
 

  
  
[{"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:

 
 

  
  
{"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.cnblogs.com \/codeplus \/"}," title ":" 123 Wood Man "}
 
 

Js:

 
 

  
  
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 + "<br/>  
  
});
  
  
// Parse the Array
  
  
$. Each (data. comments, function (I, item ){
  
  
$ ("# Info"). append (
  
  
"<Div>" + item. id + "</div>" +
  
  
"<Div>" + item. nickname + "</div>" +
  
  
"<Div>" + item. content + "</div>  
  
});
  
  
});
  
  
}
 
 

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

Running Effect of the above example:

JQuery is very powerful. For more information, see this document.

Original article: http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html