Cannot Read JSON Array Within JSON Array Using jQuery $.getJSON

Question

I cannot get the items of an JSON array within an JSON object. Here's what my JSON looks like:

[
{
    "category":9,
    "channels":[
        {
            "id":5,
            "title":"MYTITLE",
            "active":true,
            "recent":true,
            "image":"/arts/736c1ad4-2dbe-40a6-859d-8dba89c26ec2.jpg",
            "recent_tracks":{
                "vip":"https://api.xyzsite.com/recent_tracks/vip-3.json",
                "free":"https://api.xyzsite.com/recent_tracks/free-3.json"
            },
            "additional_vip_channels":[
                {
                    "channel_name":"vip-3a",
                    "recent_tracks_uri":"https://api.xyzsite.com/recent_tracks/vip-3a.json",
                    "streams":{
                        "320":"http://streams.xyzsite.com/api/914/320/stream",
                        "64":"http://streams.xyzsite.com/api/914/64/stream",
                        "192":"http://streams.xyzsite.com/api/914/192/stream"
                    }
                }
            ],
            "streams":{
                "free":"http://streams.xyzsite.com/api/31/56/stream",
                "free_56":"http://streams.xyzsite.com/api/31/56/stream",
                "free_128":"http://streams.xyzsite.com/api/31/128/stream",
                "320":"http://streams.xyzsite.com/api/33/320/stream",
                "64":"http://streams.xyzsite.com/api/33/64/stream",
                "192":"http://streams.xyzsite.com/api/33/192/stream"
            }
        },

I use the following code to get the values:

$.getJSON('https://api.xyzsite.com/channels.json', function(response) {
            $.each(response, function (index, value) {
                var catId = value.category;
                $.each(value.channels, function (index, value) {                        
                    XYZApp.channels.push({
                        categoryId: catId,
                        id: value.id,
                        name: value.title,
                        image: value.image,
                        recent_tracks: {
                            vip: value.recent_tracks.vip,
                            free: value.recent_tracks.free
                        },
                        streams: {
                            free_128: value.streams.free_128,
                            member_320: value.streams["320"],
                            member_64: value.streams["64"],
                            member_192: value.streams["192"]
                        }
                    });

                    console.log(value.additional_vip_channels);

                });

            });
        }).
then ...

I can get the values, but I cannot read the additional_vip_channels array within the .each jQuery function. I already tried:

• value.additional_vip_channels.channel_name
• value.additional_vip_channels[0].channel_name
• value.additional_vip_channels["0"].channel_name

but none of them work.

And the log output is also here:

How can I get the channel_name and other data in additional_vip_channels?

Answer 1

I believe that you would want:

channels[0]['additional_vip_channels'][0]['channel_name']

Equally, this should work: (just a different way of selecting)

channels[0].additional_vip_channels[0].channel_name

Hope that helps and works :)