Parsing a JSON object in jQuery

Question

here is an example of the JSON string:

[{"Description":"Administrators can do everything on the site","Id":"381ede0e-3bc1-4d71-83d8-bbb62a3b8aaa","Name":"Admin"},{"Description":"Technical users with limited permissions a","Id":"7a632af6-214b-4a8e-a3f8-9c0aafae2645","Name":"Technical"}]

here is my script so far:

 //Get Users Roles:
            $.getJSON('@Url.Action("GetAUsersRegisteredRoles")' + '/' + selectedUser, function (json) {
                console.log('1:');
                console.log(json);

                //Parse JSON
                $.each(json, function () {
                    $.each(this, function (k, v) {
                        alert(v.Id + v.Name +v.Description);
                    })
                });
            });

I know I am doing something wrong with the way that I am parsing it? Im sure its just something silly.

Here is the view of the json array in the console: enter image description here

When I run it in the browser my alert popup comes 6 times and says NaN

I looked at: Link which helped me get to where I am now.

score 4 · Accepted Answer · answered Feb 04 '14 at 09:35

4

Maybe you don't need the second loop

$.each(json, function (k, v) {
    alert(v.Id + v.Name + v.Description);
});

answered Feb 04 '14 at 09:35

Gohn67

10,608
2
29
35

Oh ok I see. the each already splits up each element. I only need to lop through the sub elements. – Zapnologica Feb 04 '14 at 09:37

Salman A · Answer 2 · 2014-02-04T09:43:58.490

Your JSON is an array of objects:

[
    {
        "Description": "Administrators can do everything on the site",
        "Id": "381ede0e-3bc1-4d71-83d8-bbb62a3b8aaa",
        "Name": "Admin"
    },
    {
        "Description": "Technical users with limited permissions a",
        "Id": "7a632af6-214b-4a8e-a3f8-9c0aafae2645",
        "Name": "Technical"
    }
]

You only need to iterate over the top level:

$.each(json, function (k, v) {
    console.log(v.Id, v.Name, v.Description);
});

PS: it often helps if you look directly at pretty-printed JSON.

score 1 · Answer 3 · answered Feb 04 '14 at 09:38

1

You're enumerating the elements in the list, then the properties of each element. One loop should suffice:

$.each(json, function () {
    alert(this.Id + this.Name +this.Description);
});

answered Feb 04 '14 at 09:38

Maurice Perry

32,610
9
70
97

score 1 · Answer 4 · answered Feb 04 '14 at 09:42

That's fine. Just wrap this with $ to jquerify it like $(this).

Here is the example:

var json = [
    {
        "Description":"Administrators can do everything on the site",
        "Id":"381ede0e-3bc1-4d71-83d8-bbb62a3b8aaa",
        "Name":"Admin"
    },
    {
        "Description":"Technical users with limited permissions a",
        "Id":"7a632af6-214b-4a8e-a3f8-9c0aafae2645",
        "Name":"Technical"
    }
];

$.each(json, function () {
    $.each($(this), function (k, v) { // this ==> $(this) in this line
        alert(v.Id + v.Name +v.Description);
    })
});

Jsfiddle: http://jsfiddle.net/ashishanexpert/xL7jm/

or dont do the second loop, because you have reference of the entire object in the first loop only. like:

$.each(json, function (k, v) {
    // Here v is that object each time of the loop
    alert(v.Id + v.Name +v.Description);
});

Jsfiddle Demo: http://jsfiddle.net/ashishanexpert/xL7jm/1/

Parsing a JSON object in jQuery

4 Answers4