查詢嵌套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"; 
});