我有以下食品对象:
var Foods = {
"Fruits": [{
"id": "1",
"Name": "Granny Smith",
"Category": "1"
}, {
"id": "2",
"Name": "Raspberries",
"Category": "1"
}
],
"Potatoes": [{
"id": "3",
"Name": "Maris Piper",
"Category": "2"
}, {
"id": "4",
"Name": "Charlotte",
"Category": "2"
}]
}
我想做的只是推送与链接传递的id匹配的产品。
<a href="javascript:void(0)" class="cat" id="2" onClick="getCat(this.id)">Get Foods</a>
这是我到目前为止所尝试的:
function getCat (id){
result = [];
for(let item in Foods) {
if(Foods[item].id == id) {
data[item].foreach(v=>result.push("<div class='box'><h2>" +
data[key].Name + "<br></div>"));
}
}
}
display();
function display() {
alert(result);
}
因此,如果用户点击链接(ID为2),结果数组应该包含&#34; Charlotte&#34;和#34; Maris Piper&#34;但我只是画了一个空白。
任何帮助表示感谢。
干杯
答案 0 :(得分:2)
你很接近,但是有一个小问题:
for(let item in Foods) {
console.log(Foods[item]);
/*
[{
"id": "1",
"Name": "Granny Smith",
"Category": "1"
}, {
"id": "2",
"Name": "Raspberries",
"Category": "1"
}
]
*/
所以你要迭代这些类别,即数组。
Foods[item].id
未定义为数组而不是产品。所以我们需要迭代数组,例如
var result=[];
Object.values(Foods).forEach(function(category){
category.forEach(function(product){
if(product.id===id){
result.push(product);
}
});
});
但如果你经常这样做,那么创建一个产品阵列可能会更容易一次:
var products = Object.values(Foods).reduce((arr,cat)=>arr.concat(cat),[]);
因此,只要有人点击按钮,您就可以对其进行过滤:
var result = products.filter(product=>product.id === id);
答案 1 :(得分:1)
你有点走上正轨,但data
是什么?你为什么不对result
做任何事情?您应该查看Category
属性而不是ID。
这个工作:
function getCat(id) {
let result = [];
for (let item in Foods) {
if (Foods.hasOwnProperty(item)) {
Foods[item].forEach((food) => {
if (food.Category == id) {
result.push(food);
}
});
}
}
console.log(result);
}
答案 2 :(得分:0)
首先RWX
应该在全局范围内,以便你可以在另一个函数中访问它,而在对象中你有类别,那么每个类别都有一些数据在数组中,所以在迭代对象之后,你需要迭代数组中的项目以获取值。请检查以下代码。
ADLS
答案 3 :(得分:0)
迭代器错了。你应该这样做:
function getCat(id){
result = [];
for(let item in Foods) {
Foods[item].forEach(function(each){
if(each.id == id) { // you cmpare to the wrong target
// do something
}
});
}
}