Sam Sam - 2 months ago 12
jQuery Question

Retrieving JSON and extracting a specific value

I'm using jQuery

getJSON()
to make an ajax request of the Vimeo API to return JSON. The JSON looks like this (simplified):

{
"total": 3,
"page": 1,
"per_page": 25,
"paging": {
"next": null,
"previous": null,
"first": "/videos/169123103/pictures?access_token=XXXXX&page=1",
"last": "/videos/169123103/pictures?access_token=XXXXX&page=1"
},
"data": [
{
"uri": "/videos/169123103/pictures/YYYYY",
"active": true,
"type": "custom",
"sizes": [
{
"width": 100,
"height": 75,
"link": "https://i.vimeocdn.com/video/YYYYY_100x75.webp?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src=https://i.vimeocdn.com/video/YYYYY_100x75.webp&src=http://f.vimeocdn.com/p/images/crawler_play.png"
},
{
"width": 200,
"height": 150,
"link": "https://i.vimeocdn.com/video/YYYYY_200x150.webp?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src=https://i.vimeocdn.com/video/YYYYY_200x150.webp&src=http://f.vimeocdn.com/p/images/crawler_play.png"
},
{
"width": 295,
"height": 166,
"link": "https://i.vimeocdn.com/video/YYYYY_295x166.webp?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src=https://i.vimeocdn.com/video/YYYYY_295x166.webp&src=http://f.vimeocdn.com/p/images/crawler_play.png"
}
],
"resource_key": "ZZZZZ"
}
]
}


I'd like to pull out a specific value:
"link":
from the first section in
"sizes":
. Here is my Javascript:

jQuery.getJSON('https://api.vimeo.com/videos/AAAAA/pictures?access_token=BBBBB', function(result){
var obj = jQuery.parseJSON(result);
jQuery('#pic_url').html(obj.data.sizes[0].link);
});


This seems to be getting me nowhere. I think I'm requesting the JSON correctly, but something is wrong with the way I'm parsing through it. How do I get to that
"link":
value... or any specific value for that matter?

Answer

As Barmar mentioned in comments, your "data": is an array. You need to access index 0 of that array with:

jQuery('#pic_url').html(obj.data[0].sizes[0].link);

However, even if you change that line of code to access data[0], your code will still not work. What you get from jQuery.getJSON() is the JavaScript Object which the JSON represents, not the JSON text (i.e. it has already been run through JSON.parse(). Thus, you need to not run the result through JSON.parse() yourself.

var result = `{
"total": 3,
"page": 1,
"per_page": 25,
"paging": {
    "next": null,
    "previous": null,
    "first": "/videos/169123103/pictures?access_token=XXXXX&page=1",
    "last": "/videos/169123103/pictures?access_token=XXXXX&page=1"
},
"data": [
    {
        "uri": "/videos/169123103/pictures/YYYYY",
        "active": true,
        "type": "custom",
        "sizes": [
            {
                "width": 100,
                "height": 75,
                "link": "https://i.vimeocdn.com/video/YYYYY_100x75.webp?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src=https://i.vimeocdn.com/video/YYYYY_100x75.webp&src=http://f.vimeocdn.com/p/images/crawler_play.png"
            },
            {
                "width": 200,
                "height": 150,
                "link": "https://i.vimeocdn.com/video/YYYYY_200x150.webp?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src=https://i.vimeocdn.com/video/YYYYY_200x150.webp&src=http://f.vimeocdn.com/p/images/crawler_play.png"
            },
            {
                "width": 295,
                "height": 166,
                "link": "https://i.vimeocdn.com/video/YYYYY_295x166.webp?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src=https://i.vimeocdn.com/video/YYYYY_295x166.webp&src=http://f.vimeocdn.com/p/images/crawler_play.png"
            }
        ],
        "resource_key": "ZZZZZ"
    }
]
}`

//The jQuery.getJSON call is commented out for testing in this snippet.
//jQuery.getJSON('https://api.vimeo.com/videos/AAAAA/pictures?access_token=BBBBB', function(result){
    //Don't use parseJSON() to process result from getJSON()
    var obj = jQuery.parseJSON(result); //Don't use this line in your code.

    jQuery('#pic_url').html(obj.data[0].sizes[0].link); //Use the next line this line is for testing in the snippet
    //jQuery('#pic_url').html(result.data[0].sizes[0].link); //Use this line in your code.
//});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic_url"></div>

Comments