使用Jquery消耗json数据

Question

I have a webMethod in my .cs page that returns a list.

This returns json like this..

{
    "d": [
        "Saint Clair",
        "Jefferson",
        "Shelby",
        "Tallapoosa",
        "Blount",
        "Talladega",
        "Marshall",
        "Cullman",
        "Bibb",
        "Walker",
        "Chilton",
        "Coosa",
        "Clay",
        "Tuscaloosa",
        "Hale",
        "Pickens",
        "Greene",
        "Sumter",
        "Winston"
    ]
}

and my jaquery method is

   $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: StrUrl,
                data: "{'StateId':'" + Stateid + "'}",
                async: false,
                success: function (response) {
                    var obj = jQuery.parseJSON(response);
                    alert(obj.d[0]);

                }
            })

I want to loop through this json data in Jquery and get all the values in json data.

Answer 1

jQuery has a built in method called parseJSON() which accepts a string and returns an Javascript object.

Here is a link to the documentation

Answer 2

Using .parseJSON()

var obj = jQuery.parseJSON('{"d":["Saint Clair","Jefferson","Shelby","Tallapoosa","Blount","Talladega","Marshall","Cullman","Bibb","Walker","Chilton","Coosa","Clay","Tuscaloosa","Hale","Pickens","Greene","Sumter","Winston"]}');
var p1 = obj.d;
for (var i = 0; i < p1.length; i++) {
    console.log(p1[i]);
}

Check this JSFiddle

Updates: To check whether you're facing any error

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: StrUrl,
    data: "{'StateId':'" + Stateid + "'}",
    async: false,
    success: function (response) {
        var obj = jQuery.parseJSON(response);
        var p1 = obj.d;
        for (var i = 0; i < p1.length; i++) {
            console.log(p1[i]);
        }
    },    
       error: function(e){
            console.log("Error occured:" + e);
       }
});

Answer 3

I don't think you even need JQuery.

just give a call using jquery. Now, here your D is array. So, you need to go one step down to get the array.

Here is sample code

var jsn = //is your json you are getting from web method

jsn.d.forEach(function(a){
console.log(a); // here you are getting every element.
});

Please let me know if any further details required.

As per your comment it was not working. here is working jsfiddle example. I have updated with little bit jquery to add things to dom. So, you don't have to check console.

Answer 4

Since you have an json response from the server, you can use dataType: 'json' in the ajax request. Then use $.each() to iterate through the array

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: StrUrl,
    data: "{'StateId':'" + Stateid + "'}",
    async: false,
    dataType: 'json',
    success: function (response) {
        $.each(response, function(idx, value){
            alert(value)
        });
    }
})