jquery Learning Notes---each parse JSON data

In the previous STRUTS2 Ajax analysis, we got the JSON data for the comments object, in this article we will use jquery for data parsing.

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

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

{"Comments": [{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo West yo West", "id": 2, "nickname": "Johnny"}]}

To get the JSON data, there is a simple method $.getjson () in jquery that can be implemented.

The following is a description of the official API for $.getjson ():

Jquery.getjson (URL, [data,] [Success (data, Textstatus, JQXHR)])

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

Data A map or A string that's sent to the server with the request.

success (data, Textstatus, JQXHR) A callback function is executed if the request succeeds.

The callback function accepts three parameters, the first book returns the data, the second is the state, the third is the XMLHttpRequest of jquery, we only use the first parameter.

$.each () is the method used to parse JSON data in a callback function, the following is an official document:

Jquery.each (collection, Callback (Indexinarray, valueofelement))

Collection The object or array to iterate over.

callback (Indexinarray, valueofelement) The function that would be is executed on every object.

The $.each () method accepts two parameters, the first is the collection of objects that need to be traversed (a collection of JSON objects), the second is the method to traverse, the method accepts two parameters, the first is the index of the traversal, and the second is the value that is currently traversed. Haha, with the $.each () method JSON parsing will be solved. (*^__^*) hehe ...

function Loadinfo () {
    $.getjson ("Loadinfo", function (data) {
        $ ("#info"). HTML ("");//Empty info content
        $.each (data.comments, function (I, item) {
            $ ("#info"). Append (
                    
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div>        });
        });
}

As above, Loadinfo is the requested address, function (data) {...} is the callback function after the request succeeds, data encapsulates the returned JSON object, in the following $.each (Data.comments,function (I,item) {...}) The Data.comments method directly reaches the JSON array contained within the JSON data:

[{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo Xi yo XI", "id": 2, "nickname": "Xiao Qiang"}]

The function in the $.each () method is to iterate over the array and insert it into the appropriate place by manipulating the DOM. During the traversal, we can easily access the currently traversed index ("I" in the code) and the currently traversed value ("item" in the code).

The result of the above example is as follows:

If the JSON data returned is more complex, then only a few more $.each () can be traversed, hehe. For example, the following JSON data:

{"Comments": [{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo West yo West", "id": 2, "nickname": "Johnny"}], "Content": " You're a wood man, haha. "," Infomap ": {" gender ":" Male "," occupation ":" Programmer "," blog ":" http:\/\/www.cnblogs.com\/codeplus\/"}," title ":" 123 Wood Man "}

JS 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+ "<br/>        });
        Parsing arrays
        $.each (data.comments, function (I, item) {
            $ ("#info"). Append (
                    
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div>        });
        });
}

It is important to note that when $.each () traverses a map, the parameters in function () are key and value, which is very convenient.

The performance of the above example:

jquery is very powerful, so ... More understanding also have to refer to the document, (ˇ?ˇ) want ~

JQuery Learning Notes---each parse JSON data