Using AJAX to retrieve value from nested JSON object

Question

Here's my AJAX request which works fine:

$.ajax
({
    url: 'api.php',
    type: 'GET',
    data: {search_term: data},
    dataType: 'JSON',
    success: function(data) {
        $('#div').html('<p>Constituency: ' + data + '</p>');
    },
    error: function() {
        $('#div').html('<p>Something went wrong. Please try again later.</p>');
    }
});

How would I build upon this to allow me to return nested values rather than just data? For example, how would I return constituency_name from this?

{"results": { "constituencies": [{"constituency_name": "Holborn and St Pancras", "member_name": "Frank Dobson", "member_party": "Labour", "member_biography_url": "http://www.parliament.uk/biographies/commons/Frank-Dobson/180", "member_website": "", "uri": "http://findyourmp.parliament.uk/constituencies/holborn-and-st-pancras.json" } ], "members": [] }}

Now what if there are two elements both called constituency_name as here?

{"results": { "constituencies": [{"constituency_name": "Cities of London and Westminster", "member_name": "Mark Field", "member_party": "Conservative", "member_biography_url": "http://www.parliament.uk/biographies/commons/Mark-Field/1405", "member_website": "http://www.markfieldmp.com", "uri": "http://findyourmp.parliament.uk/constituencies/cities-of-london-and-westminster.json" } , {"constituency_name": "Westminster North", "member_name": "Ms Karen Buck", "member_party": "Labour", "member_biography_url": "http://www.parliament.uk/biographies/commons/Ms-Karen-Buck/199", "member_website": "http://www.karenbuck.org.uk/", "uri": "http://findyourmp.parliament.uk/constituencies/westminster-north.json" } ], "members": [] }}

EDIT

Here's my code after trying tymeJV's response:

$.ajax
({
    url: 'api.php',
    type: 'GET',
    data: {search_term: data},
    dataType: 'JSON',
    success: function(data) {
        for (var i = 0; i < data.results.constituencies.length; i++) {
        var name = data.results.constituencies[i]["constituency_name"]; //name for this element in the array
            $('#div').html('<p>Constituency: ' + name + '</p>');
        }
    },
    error: function() {
        $('#div').html('<p>Something went wrong. Please try again later.</p>');
    }
});

I get the following error:

Uncaught TypeError: Cannot read property 'constituencies' of undefined

tymeJV · Accepted Answer · 2014-07-24 17:38:10Z

1

You would loop over your set and do what you need:

for (var i = 0; i < data.results.constituencies.length; i++) {
    var name = data.results.constituencies[i]["constituency_name"]; //name for this element in the array
    //do stuff
}

answered Jul 24, 2014 at 17:38

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

2 Comments

tymeJV Over a year ago

What does your data look like? It's saying you have no constituencies property

Sebastian Over a year ago

Depending on the variable I give it, data looks like either of the JSON strings in my question.

Khalid · Accepted Answer · 2014-07-24 17:42:26Z

0

All you need to do is to parse the data to json object like this

var Obj = JSON.parse(data);

now if you need to get constituency_name you do this

$('#div').html('<p>Constituency: ' + Obj.results.constituencies[0].constituency_name + '</p>');

answered Jul 24, 2014 at 17:42

Khalid

4,8285 gold badges29 silver badges50 bronze badges

Comments

Wes King · Accepted Answer · 2014-07-24 17:42:33Z

0

You can use jQuery's $.each function to iterate over the list and return the constituency_name object:

$.each(data.results.constituencies, function(index, element) {
    console.log(element.constituency_name);
});

This will iterate over each constituency name and print it in the console.

Check out the jQuery .each() Documentation.

answered Jul 24, 2014 at 17:42

Wes King

6274 silver badges7 bronze badges

Collectives™ on Stack Overflow

Using AJAX to retrieve value from nested JSON object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related