How to parse JSON using jQuery

Question

I'm pretty new to JSON and jQuery. I have a JSON file from a url and the format is this:

{
    "united":[
        {"Atlanta","California","Alabama"}
    ]

    "canada":[
        {"Ontario","British Columbia"},
    ]
}

What I'd like to do is when a user selects a country from a list, I would just like to parse out the array specific to the country.

What I have is this so far:

function getUrl(country) {
    alert(urlBase + countrylist);
    $.getJSON(urlBase + countrylist, function(data){
       $.each(data, function (index, value) {
           alert(value);
       });
    });
}

The alert of value is not being triggered so it doesn't seem to be going inside the each statement.

This title is misleading. jQuery mobile is a UI framework. jQuery is a javascript library that has helpful utilities that will allow you to parse json $.parseJson() — The Internet
– The Internet, Commented Aug 2, 2012 at 16:02
thanks for the response. I'm not getting any error. trying to figure out if I'm using the getJSON correctly so I can read the list specified by the user. also I changed the title and I've removed the "mobile" part. thanks. — Jay
– Jay, Commented Aug 2, 2012 at 17:03
try console.log(data) right underneath $.getJson() tell me what comes up — The Internet
– The Internet, Commented Aug 2, 2012 at 17:13
neglected to say that the alert of value is not being triggered so it doesn't seem to be going inside the each statement. thanks again. — Jay
– Jay, Commented Aug 2, 2012 at 17:32

Jasper · Accepted Answer · 2012-08-02 20:07:08Z

2

Your JSON appears to not be valid. I think the desired output for the JSON would be:

{
    "united":[
        "Atlanta","California","Alabama"
    ], //this comma is new

    "canada":[
        "Ontario","British Columbia" //a comma was removed from here
    ]
}

Here is a demo using this structure: http://jsfiddle.net/9sU65/ (watch your console to see it work)

Notice I removed the curly-brackets inside the square-brackets. This now creates a properly formatted array of cities. Also note that a comma had to be placed between the first and second key in the object.

Proper object notation is in this format:

{ key1 : 'val-1', key2 : 'val-2' }

If you have:

{ key1 , key2 }

Then you really just want to create an array, which uses slightly different notation:

[ key1 , key2 ]

BTW, here is the error I get when using your JSON (in Chrome 20):

Uncaught SyntaxError: Unexpected token ,

There are many out there, but you can always find a JSON validator and see if the JSON is valid. I do this whenever I work with a new data feed, no matter what format the output is in. Here's an example of a good JSON validator: http://jsonformatter.curiousconcept.com/

edited Aug 2, 2012 at 20:07

answered Aug 2, 2012 at 19:33

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

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

4 Comments

Dylan Valade Over a year ago

I believe the trailing comma after British Columbia is syntax error

Jay Over a year ago

By the way, thanks for the responses. I got things to work out. The JSON validator helped a lot.

Jay Over a year ago

By the way, thanks for the responses. I got things to work out. The JSON validator helped a lot. Now I have a new question in regards to parsing. when a user selects a specific state, I have the json data format: '"Georgia: [{name:value,name:value},name:[{name:value,name:value},{name:value,name:value}]]'. my parsing to select the correct state that is selected works. but here's my problem now: 'for(var i=0; i<data.Georgia.length; i++) { this.name = data.Georgia[i].name;'. But this is hard coding the state. how can I do my parsing so that I can parse with variables? Thanks.

Jasper Over a year ago

@user1332427 You will have to create an outer loop, this outer loop cannot be a for(var i = 0; i < len; i++){...} loop because it's an associative array (object) rather than a standard array. You can use for (key in data){...} but that's pretty slow, I'd recommend $.each(data, function (index, obj) {...});. Here are docs: api.jquery.com/jquery.each

Collectives™ on Stack Overflow

How to parse JSON using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related