How to parse multiple json by jQuery?

Question

I know how to use jquery to parase simple json.

json

 {
        "Symbol": "AAL.L",
        "Name": "ANGLO AMERICAN",
        "Last": "3061.50",
        "Date": "7/26/2011",
        "Time": "11:35am",
        "Change": "+35.00(+1.16%)",
        "High": "3087.00",
        "Low": "3047.00",
        "Volume": "3160820",
        "Bid": "3061.50",
        "Ask": "3062.50",
        "PercentChange": "+1.16%"
    }

jquery

 $.getJSON("1.json", function(data) {
                    $("div").html("<p>Symbol="+data.Symbol+" Time="+data.Time+" Bid="+data.Bid+"</p>");
             });

But, now I have a json file like:

[
    {
        "Symbol": "AAL.L",
        "Name": "ANGLO AMERICAN",
        "Last": "3061.50",
        "Date": "7/26/2011",
        "Time": "11:35am",
        "Change": "+35.00(+1.16%)",
        "High": "3087.00",
        "Low": "3047.00",
        "Volume": "3160820",
        "Bid": "3061.50",
        "Ask": "3062.50",
        "PercentChange": "+1.16%"
    },
    {
        "Symbol": "AAL.L",
        "Name": "ANGLO AMERICAN",
        "Last": "3061.50",
        "Date": "7/26/2011",
        "Time": "11:35am",
        "Change": "+35.00(+1.16%)",
        "High": "3087.00",
        "Low": "3047.00",
        "Volume": "3160820",
        "Bid": "3061.50",
        "Ask": "3062.50",
        "PercentChange": "+1.16%"
    },
    {
        "Symbol": "AAL.L",
        "Name": "ANGLO AMERICAN",
        "Last": "3061.50",
        "Date": "7/26/2011",
        "Time": "11:35am",
        "Change": "+35.00(+1.16%)",
        "High": "3087.00",
        "Low": "3047.00",
        "Volume": "3160820",
        "Bid": "3061.50",
        "Ask": "3062.50",
        "PercentChange": "+1.16%"
    }
]

I can't use that way to parase. the result is "undefined". How can I parase this. Additionly, I want the result is like:

Symbol = [num, num, num], Time = [num, num, num], Bid = [num, num, num]

Could someone tell me how to do that. Many thanks!!!

Shef · Accepted Answer · 2011-08-02 18:39:44Z

4

$.getJSON("1.json", function(data) {
    var i = 0, dataSize = data.length, html = '';

    for(i; i < dataSize; i++){
        html += "<p>Symbol="+data[i].Symbol+" Time="+data[i].Time+" Bid="+data[i].Bid+"</p>";
    }

    $("div").html(html);
});

Edit

Based on @Robert Koritnik's comment, "instead of a single object [...] [you] got back an array of objects that [...] [you] have to access."

edited Aug 2, 2011 at 18:39

answered Jul 27, 2011 at 10:35

Shef

45.6k15 gold badges82 silver badges91 bronze badges

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

2 Comments

Robert Koritnik Over a year ago

You should explain a little why this works, because OP is obviously not as seasoned with Javascript and JSON. Maybe they don't know that instead of a single object they got back an array of objects that they have to access.

Shef Over a year ago

@Robert Koritnik: It works, because JavaScript just works. There are merely five core lines of code to wrap the head around. The OP didn't ask why his version is not working, it was already obvious, a solution was sought to adjust for the new object. I will add your suggestion, just to make you happy.

prodigitalson · Accepted Answer · 2011-07-27 10:39:02Z

1

[] means array so you need to access the items by key like data[0]. you can loop over them with for or $.each().

$.getJSON("1.json", function(data) {
  $.each(data, function(i,obj){
    $("div").html("<p>Symbol="+obj.Symbol+" Time="+obj.Time+" Bid="+obj.Bid+"</p>");
  });                    
});

If you want the result restructured then youd have to loop over it in the same fashion and create a new structure. ID give an example but i dont understand where you are going ith [num,num,num]....

edited Jul 27, 2011 at 10:39

answered Jul 27, 2011 at 10:33

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

5 Comments

Shef Over a year ago

It's so bad performance-wise to change the DOM for every iteration. Also, $.each is way slower than the native for loop.

Robert Koritnik Over a year ago

@Shef: Slower may be... But decision which one to use should not entirely rely on speed alone.

prodigitalson Over a year ago

@shef: I agree with you on the DOM manipulation on every iteration... but as far as $.each there more to it than performance. IF raw prformance was the only concern then no on would use jquery or another lib at all.

Shef Over a year ago

@Robert Koritnik: Yes, it is slower, and I don't see any advantage here on using the $.each. If you do, please, enlighten me!

Shef Over a year ago

@prodigitalson: Using jQuery is one thing, overusing it is totally another one. jQuery is the Swiss army knife of DOM manipulation, don't abuse it.

BonyT · Accepted Answer · 2011-07-27 10:33:39Z

0

Just use an iterator

 data[0].Symbol

etc.

answered Jul 27, 2011 at 10:33

BonyT

11k5 gold badges34 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to parse multiple json by jQuery?

3 Answers 3

Edit

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related