I'm working on code which uses the Flickr API and a typical request returns a JSON result like this:
{ "sizes": { "canblog": 0, "canprint": 0, "candownload": 1,
"size": [
{ "label": "Square", "width": 75, "height": 75, "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083_s.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/sq\/", "media": "photo" },
{ "label": "Large Square", "width": "150", "height": "150", "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083_q.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/q\/", "media": "photo" },
{ "label": "Thumbnail", "width": 100, "height": 75, "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083_t.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/t\/", "media": "photo" },
{ "label": "Small", "width": "240", "height": "180", "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083_m.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/s\/", "media": "photo" },
{ "label": "Small 320", "width": "320", "height": "240", "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083_n.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/n\/", "media": "photo" },
{ "label": "Medium", "width": "500", "height": "375", "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/m\/", "media": "photo" },
{ "label": "Medium 640", "width": "640", "height": "480", "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083_z.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/z\/", "media": "photo" },
{ "label": "Large", "width": "700", "height": "525", "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_53e958a083_b.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/l\/", "media": "photo" },
{ "label": "Original", "width": "700", "height": "525", "source": "http:\/\/farm3.staticflickr.com\/2811\/9227026248_44fe99eea1_o.jpg", "url": "http:\/\/www.flickr.com\/photos\/l0rdshrek\/9227026248\/sizes\/o\/", "media": "photo" }
] }, "stat": "ok" }
What I'd like to do is, using JavaScript and jQuery, check whether the result contains a size member which has a label value of "Large" (for instance), and then extract just that member of the result so I can read from its source and url values.
I naively tried the following:
var photoURL, thumbURL, photoLink;
$.ajax({ //inner request to Flickr for photo sizes
type: 'GET',
url: getSizeUrl,
dataType: 'json',
async: true,
success: function(sizeData){
var sizeResults = sizeData.sizes.size;
if(sizeResults[label="Large"]) {
photoURL = sizeResults[label="Large"].source;
}
}});
But the sizeResults[label="Large"] syntax is seemingly invalid. I've hunted around for over an hour trying to find the correct way to do this, but I must be using the wrong search terms because I can't find any examples of this sort of data extraction. Can it be done? [If this has already been well covered by another Stack Overflow question, please point me to it and I'll delete this duplicate.]
If it's not possible to do things this way, what is an efficient way to check for and examine the "Large" record from the above JSON result?
I'd use $.grep for this. It's clean and simple to use.
var a = $.grep(data.sizes.size, function (size) {
// here you'll get an object of data. You'll have to use the filter condition here
return size["label"] === "Large";
})[0]; // you'll get an [{}] if you don't use [0] in the end.
// now, you'll get just {} because of the [0] in the end.
From here on, you could just say,
var photoURL = a.source;
This will return every element in data.sizes.size that has a label called "Large" in it. See more in docs here.
Demo : http://jsfiddle.net/vLaUB/1/