Javascript looping through a JSON string

Question

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??

@William, lol - there should be a "new comment has been posted" notification, like there is for answers. — RPM1984
– RPM1984, Commented Sep 21, 2010 at 5:25
:) sometimes it's hard to decide whether to do a comment or an answer — William Niu
– William Niu, Commented Sep 21, 2010 at 5:28

Mic · Accepted Answer · 2010-09-21 07:25:08Z

5

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);

answered Sep 21, 2010 at 7:25

Mic

25.2k9 gold badges61 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Thomas · Accepted Answer · 2017-04-19 13:43:14Z

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;
    var iLength = json.data.item.length;
    for (i = 0; i < iLength; i++) {
        alert(json.data.item[i].FromMember);
    }
})();

jsFiddle

Reigel Gallarde · Accepted Answer · 2010-09-21 05:31:02Z

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.

Thank you! yes, strange thing.. the JSON data was essentially a string rather than an object! thanks for the reply!

RPM1984 · Accepted Answer · 2010-09-21 05:34:32Z

0

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.

edited Sep 21, 2010 at 5:34

answered Sep 21, 2010 at 5:24

RPM1984

73.3k62 gold badges241 silver badges364 bronze badges

Comments

Q_Mlilo · Accepted Answer · 2010-09-21 06:57:49Z

0

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

edited Sep 21, 2010 at 6:57

answered Sep 21, 2010 at 6:18

Q_Mlilo

1,7975 gold badges23 silver badges26 bronze badges

1 Comment

Dav.id Over a year ago

Thank you! yes, it looked like the JSON data was coming back as a string rather than an object..

Collectives™ on Stack Overflow

Javascript looping through a JSON string

5 Answers 5

Comments

jsFiddle

Comments

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Related