如果满足条件，Javascript 推送到数组

Question

我有以下食物对象:

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)，结果数组应包含“Charlotte”和“Maris Piper”，但我只是画了一个空白。

感谢任何帮助。

干杯

Answer 1

你已经很接近了，但是有一个小问题:

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

Run

但如果您经常这样做，那么创建一个产品数组一次可能会更容易:

var products = Object.values(Foods).reduce((arr,cat)=>arr.concat(cat),[]);

因此，只要有人单击按钮，您就可以简单地过滤此内容:

var result = products.filter(product=>product.id === id);

Run