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是一个数组，因此没有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浏览器（＆lt; 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";
});

Answer 4

这适合我。

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 5

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

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

一般情况下，如果我们想支持旧浏览器，那么ES5功能总是很好用。

查询嵌套的JSON

5 个答案: