How to work withJSON data after calling an AJAX function in jQuery

Question

With this code:

 $("#mybutton").click(function(){
           $.ajax({
                url: '/Member/GetPinPoints/@Model.Id',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
            alert(data);
            },
            error: function() {

            alert("error");
            }
            });


    return false;
});

I am receiving a JSON object that looks like this:

[{"Position":1,"Top":182,"Left":20,"Height":73,"Width":90},{"Position":2,"Top":69,"Left":103,"Height":98,"Width":1}]

How can I iterate through this data, lets say if i wanted to alert each separate value?

no.good.at.coding · Accepted Answer · 2011-05-31T04:28:51.423

4

Plain old JavaScript:

for(var i = 0; i < data.length; i++){
    for(var key in data[i]){
        alert(key + " : " + data[i][key]);
    }
}

And jQuery:

$.each(data, function(index, element){
    $.each(element, function(key, value){
        alert(key + " : " + value);
    });
});

You need to iterate in a nested loop since you need to go over all elements in the array and for each array element, go over all properties.

edited May 31 '11 at 04:28

answered May 31 '11 at 04:22

no.good.at.coding

20,221
2
60
51

I'm not following it either. For the data structure in place your answer seems the most valid. + to you. – Khepri May 31 '11 at 04:59
@Khepri @naveen Thanks! @naveen I think yours might be because you only access one property (`Position`), a +1 all the same. – no.good.at.coding May 31 '11 at 05:02
maybe. i just wanted to show the method. was more concerned about the absence of `.d` really :) – naveen May 31 '11 at 06:33

score 1 · Answer 2 · answered May 31 '11 at 04:44

The previous examples will work, but they are naive. No good at coding's example will just loop through an array, which isn't very robust.

Let's pretend that you return key/value pairs in your code behind method and you want to be able to pick apart this data to use however you want. You start with this.

[WebMethod]
    public static Dictionary<string, string> EditPromo(int promoId)
    {
        using (var db = new DataContext())
        {
            var q = db.Promos.Where(x => x.promoID == promoId).Select(x => x).Single();

            return new Dictionary<string, string>()
                       {
                           {"code", q.code},
                           {"label", q.label},
                           {"expiredate", string.Format("{0:M/d/yyyy}", q.expireDate)}
                       };
        }
    }

Now we can access it via jQuery Ajax like so:

$.ajax({
        url: "/Manager/mPromo/Promo.aspx/EditPromo",
        context: $("#editPromo"),
        data: "{promoId:'" + promoid + "'}",
        success: function (msg)
        {
            var resp = msg.d;
            $("h1:first", this).text("Edit " + resp.code);
            $("input#txtDate", this).val(resp.expiredate);
        }
    });

Notice how I created a variable to hold msg.d, called resp. I can then use resp.ReturnedDictionaryKey. Above I used used code and expiredate. I can use them however I please.

to be fair..anthony did ask for the case of 'if I want to alert each separate value' — Adam Tuliper, May 31 '11 at 05:09

score 0 · Answer 3 · answered May 31 '11 at 04:31

Try this.

$("#mybutton").click(function(){
    $.ajax({
        url: '/Member/GetPinPoints/@Model.Id',
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            //asp.net 3.5 plus wraps the return into a .d property
            var msg = data.hasOwnProperty("d") ? data.d : data;
            for(var i=0; i < msg.length; i++){
              alert(msg[i].Position);  
            }
        },
        error: function() {

        alert("error");
        }
    });
    return false;
});

How to work withJSON data after calling an AJAX function in jQuery

3 Answers3