Выберите один элемент из JSON результат на основе значения члена

Question

Я работаю над кодом, который использует API Flickr и типичный запрос возвращает результат JSON как это:

{ "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" } 

То, что я хотел бы сделать, это , используя JavaScript и jQuery, проверьте, содержит ли результат элемент size, который имеет значение label «Большой» (например), а затем извлекает только этот элемент результата, чтобы я мог читать его значения source и url.

я наивно попытался следующие:

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; 
     } 
}}); 

Но синтаксис sizeResults[label="Large"], казалось бы недействительным. Я уже много часов пытался найти правильный способ сделать это, но я должен использовать неправильные условия поиска, потому что я не могу найти примеров такого рода извлечения данных. Это можно сделать? [Если это уже было хорошо освещено другим вопросом переполнения стека, укажите мне его, и я удалю этот дубликат.]

Если это невозможно сделать таким образом, что является эффективным способом проверки и проанализировать «большую» запись из приведенного выше результата JSON?

Answer 1

Я бы использовал $.grep для этого. Он чист и прост в использовании.

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. 

С этого момента, вы могли бы просто сказать,

var photoURL = a.source; 

Это будет возвращать каждый элемент в data.sizes.size, что имеет лейбл под названием «Большой» в нем. See more in docs here.

Демо: http://jsfiddle.net/vLaUB/1/

Answer 2

Вы можете поместить их все в массив объектов, а затем какой-то ключ на объектах, или вы могли бы просто цикл по результатам:

$.each(sizeResults, function(index, value) { 
    if (value.label == "Large") { 
    photoURL = value.source; 
    return false; // breaks out of the loop. 
    } 
}); 

, конечно, не эффективна, но она должна быть достаточно быстро ...

Answer 3

Использование чистого JavaScript:

var large = sizeResults.filter(function(x) { return x.label === 'Large'; })[0]; 
large; // => { "label": "Large", "width": "700", "height": "525" ... }