Javascript looping through a JSON string

Question

Hi there, Ok, a little new to JSON format..

I have the following JSON string returned from an AJAX call, which firebug actually displays in a tree quite nicely.. however I can't seem to be able to work out how to loop through the content...

{"data":{"item":[{"@id":"7","fromMemberID":"7","FromMember":"david","notificationsType":"event","notificationsDesc":"A new event (Test Event Thursday, 16 September 2010) has been created.","notificationsDate":"16 Sep 2010","notificationsTime":"00:02:18"},{"@id":"8","fromMemberID":"7","FromMember":"david","notificationsType":"event","notificationsDesc":"A new event (Test Event Thursday, 16 September 2010) has been created.","notificationsDate":"16 Sep 2010","notificationsTime":"08:26:24"}]}}

I have tried to say get a count of items.. alert(data.item.length); or a loop:

for(i=0; i<data.item.length; i++)
{
    alert(data.item[i].FromMember);
}

obviously missing something fundemental...

Any ideas??

Answer 1

Make sure you use de-serialize the JSON.

var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

Depends on which JavaScript frameworks you are using, each has it's own de-serializer.

The above example is using the MicrosoftAjax.js library.

More info here.

Answer 2

you should have something like this for it to work. notice the obj in the for-loop.

var obj = {"data":{"item":[{"@id":"7","fromMemberID":"7","FromMember":"david","notificationsType":"event","notificationsDesc":"A new event (Test Event Thursday, 16 September 2010) has been created.","notificationsDate":"16 Sep 2010","notificationsTime":"00:02:18"},{"@id":"8","fromMemberID":"7","FromMember":"david","notificationsType":"event","notificationsDesc":"A new event (Test Event Thursday, 16 September 2010) has been created.","notificationsDate":"16 Sep 2010","notificationsTime":"08:26:24"}]}};

for (i = 0; i < obj.data.item.length; i++) {
    alert(obj.data.item[i].FromMember);
}​

or if you have data as your variable, still you should call it as data.data.item.length.

Answer 3

You have to parse your JSON data first. Have a look at the jquery manual, parseJSON. However this is not supported by every browser and it is recommended to write your own parser. Here is a jons parser template.

response = response.parseJSON();

for ( var i in response.data.item) {
   response.data.item[i]....
}

Answer 4

Just pass your json to the function below.

function getData(obj) {
    var myData = obj.data.item, i, output = '';

    for (i = 0; i < myData.length; i += 1) {
        for (key in myData[i]) {
         output += key + " : " + myData[i][key];
        }       
    }
    return output;
}

Click for example

Answer 5

You were very close... "data" is actually a key in your JSON, so you have to refer to your JSON variable to access "data".... so you want JSON.data.item[i].FromMember

Here is some full working code:

(function() {
    var json = {"data":{"item":[{"@id":"7","fromMemberID":"7","FromMember":"david","notificationsType":"event","notificationsDesc":"A new event (Test Event Thursday, 16 September 2010) has been created.","notificationsDate":"16 Sep 2010","notificationsTime":"00:02:18"},{"@id":"8","fromMemberID":"7","FromMember":"david","notificationsType":"event","notificationsDesc":"A new event (Test Event Thursday, 16 September 2010) has been created.","notificationsDate":"16 Sep 2010","notificationsTime":"08:26:24"}]}};

    var i;
    for(i=0; i<json.data.item.length; i++)
    {
        alert(json.data.item[i].FromMember);
    }
})();​

jsFiddle

Answer 6

The JSON object is a standard in the new browsers. For older browsers you can add the javascript library json2.js from json.org (2.5kb minified).

To transform the string to an object, use JSON.parse

var response = JSON.parse('{"data":{"ite...ime":"08:26:24"}]}}'),
    item = response.data.item;

And to send back your data to the server, use JSON.stringify:

var jsonString = JSON.stringify(theObject);