In depth analysis of jquery parsing json data

  • 2020-03-30 04:32:53
  • OfStack

Let's start with parsing the JSON data for the comments object in the above example, and then summarize the methods for parsing JSON data in jQuery.

The JSON data is as follows, which is a nested JSON:


{"comments":[{"content":" Very good! ","id":1,"nickname":" what "},{"content":" Yo yo west west ","id":2,"nickname":" Jack Bauer "}]}

To getJSON data, there is a simple method in jQuery called $.getjson ().

The following is a reference to the official API's description of $.getjson () :

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 takes three arguments, the data returned by the first book, the state in the second, and the XMLHttpRequest in jQuery. We only use the first argument.

$.each() is the method used to parse JSON data in the callback function. Here is the 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 takes two arguments, the first is the set of objects to be traversed (the set of JSON objects), the second is the method to be traversed, which takes two more arguments, the first is the index to be traversed, and the second is the value to be traversed before. Haha, with the $.each() method, JSON parsing is easy. (* ^ __ ^ *) hee hee...


function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#info").html("");//Empty info & cake;               $.each(data.comments, function(I, item) {
            $("#info").append(
                    "<div>" + item.id + "</div>" +
                    "<div>" + item.nickname    + "</div>" +                     "<div>" + item.content + "</div><hr/>");
        });
        });
}

As above, loadinfo is the address of the request, function(data){... } is the callback function after the request succeeds. Data encapsulates the returned JSON object, under $.each(data.comments,function(I,item){... }) method data.comments directly goes to the JSON array contained in the JSON data package:


[{"content":" Very good! ","id":1,"nickname":" what "},{"content":" Yo yo west west ","id":2,"nickname":" Jack Bauer "}]

The function in the $.each() method iterates over the array and inserts it in the appropriate place by manipulating the DOM. In the process of traversing, we can easily access the current traversed index(" I "in the code) and the current traversed value (" item" in the code).

The operation results of the above example are as follows:

If the returned JSON data is more complex, just a little more $.each() to iterate over, heh. For example, the following JSON data:


{"comments":[{"content":" Very good! ","id":1,"nickname":" what "},{"content":" Yo yo west west ","id":2,"nickname":" Jack Bauer "}],
"content":" You're made of wood, haha. ","infomap":{" gender ":" male "," professional ":" The programmer ",
" blog ":"http://www.xxx.com/codeplus/"},"title":"123 blockhead "}

Js is as follows:


function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#title").append(data.title+"<hr/>");
        $("#content").append(data.content+"<hr/>");
        //Jquery parses map data
        $.each(data.infomap,function(key,value){
            $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
        });
        //Parse array
        $.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>" + item.id + "</div>" +
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div><hr/>");
        });
        });
}

It's worth noting that $.each() traverses the Map with the parameters key and value in function(), which is handy.


Related articles: