查询嵌套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" 
    }] 
} 

我需要做的就是查询的“变化”阵列的内部值，如果发现匹配返回的对象。

我能够查询值的“第一级”就好：

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是一个数组，所以不存在obj.variations这样的对象。 类似的东西应该工作：

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

这适用于我。

var obj=[{ 
    "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" 
    }] 
}]; 
var result=$.grep(obj,function(element,index){ 
    return element.offerPrice=="42.00"; 
}); 
var variations=$.grep(result[0].variations, function(element, index){ 
    return element.key == "Personalization" && element.value == "2 Lines of Personalization"; 
}); 

Answer 4

在ES5你可以写这样的事情：

var filtered = obj.filter(function(el){ 
    return el.variations.some(function(el) { 
    return el.key === "Personalization" && el.value === "2 Lines of Personalization"; 
    }) 
}); 

console.log(filtered); 

您可以使用grep在jQuery来模拟filter，但据我所知，它没有像some什么。当然你可以效仿它。您还可以在MDN中找到垫片filter和some。

一般来说，如果我们想要支持旧版本的浏览器，总是会有一个ES5功能的垫片。

Answer 5

如何使用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"; 
});