How can I access an array of objects within a JSON object?

Question

How can I access objects that sit within an array, which is itself inside a JSON object?

JSON Structure:

{
    "name":"animals",
    "type":"farmyard",
    "version": "1.0",

    "items": [{
        {
            "name": "pig",
            "description": "pink, round"
        },

        {
            "name": "chicken",
            "description": "small, yellow"
        }
    }]

}

And here is the JS so far...

    $.getJSON( "https://_LINK_TO_JSON.json", function( data ) {

      var farm = [];
      var animals = [];

      $.each( data, function( key, val ) {

        farm.push(key, val);

        var animals = farm[3];
        console.dir(animals);

      });

      console.dir(animals);

    });

I've tried to use farm.items to target the array, but that didn't work so I've used the index number instead.

(Naturally, using farm.items[1].name to target the first name didn't work either.)

Is the reason I can't just use dot notation something to do with the fact that JSON keys and valuesare within quote marks? (I can't actually edit the JSON feed as it's external).

How can I simply target the nested array and grab items I want and their properties?

That's not valid JSON. The outer level of { } in the "items" array is probably a typo. If so, then iterating through data.items would give you access to the elements of the array. — Pointy
– Pointy, Commented Oct 25, 2015 at 19:57

DLevsha · Accepted Answer · 2015-10-25 20:09:34Z

2

You have error in your JSON structure. Your JSON need to be:

var data = {
    'name':'animals',
    'type':'farmyard',
    'version': '1.0',

    'items': [
        {
            'name': 'pig',
            'description': 'pink, round'
        },

        {
            'name': 'chicken',
            'description': 'small, yellow'
        }
    ]

};

console.log(data.items);

Try this http://jsfiddle.net/6uhp6y34/

answered Oct 25, 2015 at 20:09

DLevsha

1363 bronze badges

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

1 Comment

jx3 Over a year ago

Ah right, thanks. OK so the error with the external JSON is holding me back! :(

Amit Jaiswal · Accepted Answer · 2015-10-25 20:21:33Z

1

you can use $eaach function of jquery as

$.getJSON (urltoJSON, function(data){
$.each(data.response.venue.items, function (index, value) {
    console.log(this.name);
    console.log(this.description);
 });
});

also you can save the json in a javascript variable and iterate over it as

data= 'get ur  json'
for ( i in data.items ) {
   console.log ( i.name + "" )
   console.log ( i.description + "" );    
    }

answered Oct 25, 2015 at 20:21

Amit Jaiswal

1134 bronze badges

5 Comments

jx3 Over a year ago

This actually solved it. I was able to access the nested array and console log some of the properties :)

jx3 Over a year ago

Weirdly I have everything looping through everything and working in console.logs, however when I do this:

$('.container').html('<li> <a href="' + this.link + '" target="_blank">' + '<img src="' + this.thumbnail + '"/>' + this.name + '</a> </li>');

it just spits out the last object and nothing else?

jx3 Over a year ago

OK, realised that the loops working okay. It's just only working with the first item, then giving me a /null value, followed by 404s for 2 subsequent objects? Is this something to do with the way I'm making the request?

Amit Jaiswal Over a year ago

well everything is treated as javascriptObjects first. if you want text then use JSON.stringify(). also if you want to loop over some of items, change for loop to traditional one

Amit Jaiswal Over a year ago

also try to print the json response and verify if that is as expected.

Collectives™ on Stack Overflow

How can I access an array of objects within a JSON object?

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related