Question

我正在处理使用Flickr API的代码，典型的请求会返回如下的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"]语法看似无效。我已经找了一个多小时试图找到正确的方法，但我必须使用错误的搜索词，因为我找不到任何这种数据提取的例子。可以吗？ [如果其他Stack Overflow问题已经很好地解决了这个问题，请指出我，我将删除此副本。]

如果不能以这种方式做事，那么检查和检查上述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中包含名为“Large”的标签的每个元素。 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" ... }

根据成员值从JSON结果中选择一个成员

3 个答案: