查询嵌套的JSON

Question

我有一些JSON数据，格式如下：

{
    "id": "ABC123",
    "offerPrice": 42.00,
    "regularPrice": 42.00,
    "variations": [{
        "key": "Style",
        "value": "Black"
    }, {
        "key": "Personalization",
        "value": "2 Lines of Personalization"
    }]
}, {
    "id": "987ZYX",
    "offerPrice": 52.00,
    "regularPrice": 52.00,
    "variations": [{
        "key": "Style",
        "value": "Black"
    }, {
        "key": "Personalization",
        "value": "3 Lines of Personalization"
    }]
}

我需要做的是查询“variations”数组中的值，如果找到匹配的值，则返回对象。

我可以很好地查询“第一级”的值：

var results = jQuery.grep(obj, function (element, index) {
    return element.offerPrice == "42.00";
});

如果我指定了一个索引值(显然我不想这样做)，我可以查询变量：

var results = jQuery.grep(obj, function (element, index) {
    return element.variations[1].key == "Personalization" && element.variations[1].value == "2 Lines of Personalization";
});

理想情况下，这是我想要做的，但它不起作用：

var results = jQuery.grep(obj.variations, function (element, index) {
    return element.key == "Personalization" && element.value == "2 Lines of Personalization";
});

我一直在想：

Uncaught TypeError: Cannot read property 'length' of undefined

这是一个jsFiddle：http://jsfiddle.net/VzqWW/3/

有什么想法吗？

Answer 1

没有像obj.variations这样的对象，因为obj是一个数组。像这样的东西应该是有效的：

var results = jQuery.grep(obj, function (element, index) {
    res = jQuery.grep(element.variations, function (element2, index2) {
        return element2.key== "Personalization" && element2.value == "2 Lines of Personalization";
    });
    return (res.length != 0);
});

Answer 2

您可以使用标准的数组过滤来实现这一点，其中的map (link)、reduce (link)和filter(link)方法是作为ES5的一部分提供的，我已经更新了jsfiddle以使用它们，但代码是内联的：

var variations = obj.map(function (x) { 
    return x.variations;
}).reduce(function (x, y) {
   return x.concat(y); 
});

var personalizationVariations = variations.filter(function (v) {
    return v.key== "Personalization" && v.value == "2 Lines of Personalization"
});
console.log('Personalization Variations', personalizationVariations);

如果你支持ES3浏览器(< IE9)，你需要像es5shim这样的东西来添加这些方法。

Answer 3

将jQuery.map与grep一起使用如何？

var allVariations = $.map(obj, function(element, i) {
    return element.variations;
});

var variations = $.grep(allVariations, function(variation, index) {
    return variation.key == "Personalization" && variation.value == "2 Lines of Personalization";
});