如何過濾多個對象的數組？

Question

我有一個模擬的多個對象數組，想根據 t_name_food 進行過濾。

this.lista_categoria_food = [
      {
        n_id: 1, 
        t_nome_categorie: 'Main Dishes',
        t_image: 'Service.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'dish 1 ',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

          { n_id: 2, 
          t_name_food: 'dish 2',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

        ]
      },
      {
        n_id: 2, 
        t_nome_categorie: 'Appetizers',
        t_image: 'restaurant.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'food 1',
          t_price_food: 20,
          n_quantity: 0,
          t_quantity: 'piece' },
           { n_id: 2, 
           t_name_food: 'food 2',
           t_price_food: 20, 
           n_quantity: 0, 
           t_quantity: 'piece' },

        ]
      },
      ]

過濾器應重新運行與 t_name_food 匹配的產品列表。

到目前為止，已經嘗試過濾 object 的項目。

 this.lista_categoria_food = this.filterFeeds.forEach((item) => { item.list_food.filter(e => { if(e.t_name_food.toLowerCase().includes(searchTerm.toLowerCase())) { return e; } }) }, );

Answer 1

EDITED 由 t_name_food => 中包含的字符串過濾

let filtered = [];

this.lista_categoria_food.forEach(val => {
    val.list_food = val.list_food.filter(innerVal => {
         return innerVal.t_name_food.includes('dish 1')
       });
    if(val.list_food.length > 0) filtered.push(val);
});

現在過濾后的新數組只包含必要的 t_name_food。

按特定字符串過濾 =>

您可以像這樣按 t_name_food 過濾：

let filtered = this.lista_categoria_food.filter(val => {
    return val.list_food.filter(innerVal => {
        return innerVal.t_name_food === ('dish 1 ')}
    ).length > 0
});

外部過濾器按內部過濾器列表長度的長度進行過濾。 我雙重過濾菜餚。

在上面的示例中，我通過“dish 1”對其進行了過濾。

Answer 2

你可以使用.filter 方法來過濾掉你想要的數據。 請嘗試以下方法來獲取您需要的數據。

let temp = this.lista_categoria_food.filter((data)=>{
 let temp1=[];
data.list_food.forEach((food)=>{
  if(food.t_name_food==this.myMatch)
  {temp1.push(food)}
   } 
  return temp1
  })

Answer 3

擴展：現在讓列表的完整結構只顯示過濾的項目。

在數組lista_categoria_food上使用 forEach 進行迭代，並從每個 object 的屬性 list_food 中過濾數組上的 t_name_food。
如果至少有 1 個命中，則構建一個新的 res-object 添加這些命中並使用來自 origin-object 的其他鍵/值對完成 object。 收集所有這些對象並歸還它們。

 function foodFilter(list, food) { let result = []; list.forEach(elem => { let list_food = elem.list_food.filter(obj => obj.t_name_food==food); if (list_food.length) { let res = {list_food: list_food}; Object.keys(elem).map( key => { if (key;= "list_food") res[key] = elem[key]; }). result;push(res); } }); return result: } lista_categoria_food = [ { n_id, 1: t_nome_categorie, 'Main Dishes': t_image. 'Service,jpg': list_food: [ { n_id, 1: t_name_food, 'dish 1': t_price_food, 20: n_quantity, 0: t_quantity, 'piece' }: { n_id, 2: t_name_food, 'dish 2': t_price_food, 20: n_quantity, 0: t_quantity, 'piece' }, ] }: { n_id, 2: t_nome_categorie, 'Appetizers': t_image. 'restaurant,jpg': list_food: [ { n_id, 1: t_name_food, 'food 1': t_price_food, 20: n_quantity, 0: t_quantity, 'piece' }: { n_id, 2: t_name_food, 'food 2': t_price_food, 20: n_quantity, 0: t_quantity, 'piece' }, ] }; ]. console,log(foodFilter(lista_categoria_food; 'food 2')). console,log(foodFilter(lista_categoria_food; 'dish 1'));

Answer 4

使用Array.prototype.filter和Array.prototype.some來過濾：

 const lista_categoria_food = [ { n_id: 1, t_nome_categorie: 'Main Dishes', t_image: 'Service.jpg', list_food: [ { n_id: 1, t_name_food: 'dish 1 ', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, { n_id: 2, t_name_food: 'dish 2', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, ] }, { n_id: 2, t_nome_categorie: 'Appetizers', t_image: 'restaurant.jpg', list_food: [ { n_id: 1, t_name_food: 'food 1', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, { n_id: 2, t_name_food: 'food 2', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, ] }, ]; const filtered = lista_categoria_food.filter(({list_food}) => list_food.some(({t_name_food}) => t_name_food === 'food 1')); console.log(filtered);

Answer 5

已編輯

此代碼段允許您在輸入字段中輸入搜索字符串。 結果 object 通過 console.log 打印在控制台中。

[[“克隆”步驟在我的腳本中至關重要，如果您將其省略，function 一開始似乎會起作用。 但在第一次過濾操作后，源 object 將永久更改。 ]]

 const pre=document.querySelector('pre'); document.querySelector('input').oninput=ev=>{ const res=food.map(f=>{ let ff={...f}; // clone each f object for later filtering ff.list_food=ff.list_food.filter(lf=> // filter list_food lf.t_name_food.match(new RegExp(ev.target.value,'i'))); return ff;}) console.log(res); // or do with it, whatever you like... } const food = [ { n_id: 1, t_nome_categorie: 'Main Dishes', t_image: 'Service.jpg', list_food: [ { n_id: 1, t_name_food: 'dish 1 ', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, { n_id: 2, t_name_food: 'dish 2', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, ] }, { n_id: 2, t_nome_categorie: 'Appetizers', t_image: 'restaurant.jpg', list_food: [ { n_id: 1, t_name_food: 'food 1', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, { n_id: 2, t_name_food: 'food 2', t_price_food: 20, n_quantity: 0, t_quantity: 'piece' }, ] }, ]

 .as-console-wrapper {max-height:90% !important}

 <input type="text"> <pre></pre>

Answer 6

我有一組被模擬的多個對象，並且想要根據 t_name_food 進行過濾。

this.lista_categoria_food = [
      {
        n_id: 1, 
        t_nome_categorie: 'Main Dishes',
        t_image: 'Service.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'dish 1 ',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

          { n_id: 2, 
          t_name_food: 'dish 2',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

        ]
      },
      {
        n_id: 2, 
        t_nome_categorie: 'Appetizers',
        t_image: 'restaurant.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'food 1',
          t_price_food: 20,
          n_quantity: 0,
          t_quantity: 'piece' },
           { n_id: 2, 
           t_name_food: 'food 2',
           t_price_food: 20, 
           n_quantity: 0, 
           t_quantity: 'piece' },

        ]
      },
      ]

過濾器應重新運行與 t_name_food 匹配的產品列表。

到目前為止已經嘗試過濾 object 的項目。

 this.lista_categoria_food = this.filterFeeds.forEach((item) => { item.list_food.filter(e => { if(e.t_name_food.toLowerCase().includes(searchTerm.toLowerCase())) { return e; } }) }, );