trying to iterate over JSON structure using jquery

Question

I'm new to jquery and JSON. I have the following JSON structure.

{
   "address":{
      "suburb":[
         "HACKHAM WEST",
         "HUNTFIELD HEIGHTS",
         "ONKAPARINGA HILLS",
         "m"
      ],
      "state":"SA"
   }
}

So basically the above is the response from this:

$.ajax({
    type:'POST',
    url: 'getAddress.php',
    data:postCode='+postCode',
    success: function(response) {
        alert(response)
    }
});

So, what I'm trying to get is a variable containing state, and an array containing the suburbs.

Your data is wrong in your $.ajax. It should be data: 'postCode='+postCode, — gen_Eric
– gen_Eric, Commented Jun 26, 2012 at 17:43

VisioN · Accepted Answer · 2012-06-26 17:50:37Z

5

Check you have valid Ajax request:

$.ajax({
    type: "POST",
    url: "getAddress.php",
    data: {
        postCode : postCode          // data as object is preferrable
    },
    dataType: "json",                // to parse response as JSON automatically
    success: function(response) {
        var state = response.address.state;
        var suburbs = response.address.suburb;
    }
});

edited Jun 26, 2012 at 17:50

answered Jun 26, 2012 at 17:43

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

3 Comments

user933791 Over a year ago

I see.. So, I need the dataType to be 'json'? Thanks

Kevin B Over a year ago

@user933791 If you expect the server to return json, you mightaswell specify json as the datatype. If you return proper headers from the server jQuery might detect that it as json, but it is usually better to specify it.

VisioN Over a year ago

@user933791 Yep. Otherwise, getAddress.php should send the following content type in header: header("Content-Type: application/json");.

Claudio Redi · Accepted Answer · 2012-06-26 17:49:14Z

3

This should do the trick

$.ajax({type:'POST', 
    url: 'getAddress.php', 
    dataType: 'json',
    data:'postCode='+postCode, 
    success: function(response) {
        var state = response.address.state;
        var suburbs = response.address.suburb;   
    }
});

Added dataType:'json' and fixed the data parameter.

edited Jun 26, 2012 at 17:49

answered Jun 26, 2012 at 17:43

Claudio Redi

68.5k15 gold badges138 silver badges161 bronze badges

Comments

gen_Eric · Accepted Answer · 2012-06-26 17:44:44Z

1

You need to parse the JSON you get. $.ajax can do this for you.

$.ajax({
    type:'POST',
    url: 'getAddress.php',
    data: 'postCode='+postCode, // make sure this line is correct
    dataType: 'json', // this tells jQuery to parse it for you
    success: function(response) {
        var state = response.address.state;
        var suburbs = response.address.suburb;
    }
});

answered Jun 26, 2012 at 17:44

gen_Eric

228k42 gold badges303 silver badges343 bronze badges

Collectives™ on Stack Overflow

trying to iterate over JSON structure using jquery

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related