如何过滤多个对象的数组？答案

【问题标题】：How to filter an array of multiple objects?如何过滤多个对象的数组？
【发布时间】：2020-08-09 10:50:35
【问题描述】：

我有一个包含多个模拟对象的数组，并且想要根据 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 匹配的产品列表。

直到现在都尝试过滤对象的项目。

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

【问题讨论】：

您能分享一下到目前为止您为实现这一目标所做的努力吗？
请分享您的代码尝试？为达到这个！谢谢
好的。刚刚编辑

标签： javascript arrays object filter

【解决方案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”对其进行过滤。

【讨论】：

这给出了一个空数组，除非这个词正好是菜 1。
我刚刚检查了一下，示例给出了一个由“dish 1”过滤的数组，你试过什么？你过滤什么？
抱歉发现丢失的 "}" 已修复 - 现在试试 :)
请注意，该示例是您上传的数据，并且在菜 1 => 'dish 1' 之后有空格
仍然只有它的全名才会给出结果。我也想用字符过滤。

【解决方案2】：

扩展：现在让列表的完整结构只显示过滤的项目。

使用 forEach 遍历您的数组 lista_categoria_food 并从每个对象的属性 list_food 中过滤数组上的 t_name_food。
如果至少有 1 个命中构建一个新的 res-object，则添加这些命中并使用来自 origin-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'));

【讨论】：

我想将 lista_categoria_food 数组作为结构返回，但只包含过滤后的对象
@Stefani Totokotsopoulou 我把它扩展到你的愿望。
您是否希望列表中的元素在过滤 list_food 中的任何元素后没有？目前我把这些元素删掉了。

【解决方案3】：

您可以使用 .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
  })

【讨论】：

我已经尝试过了，并给出了长度为 0 的空数组。
谢谢。在这种情况下， temp 和 lista_categoria_food 的结构会有所不同，这不会更新我的界面。
@MinalShah 过滤器方法回调需要返回一个布尔值，你总是返回一个数组，该数组总是评估为真。
如果你想保持相同的数组，你可以用你自己的数组替换 temp。这将实现您的目标。
@MinalShah 数组 lista_categoria_food 它具有特定的结构，不能直接推送食物。 temp1.push(食物)

【解决方案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);

【讨论】：

我想将 lista_categoria_food 数组作为结构返回，但只包含过滤后的对象

【解决方案5】：

已编辑

此 sn-p 允许您在输入字段中输入搜索字符串。生成的对象通过 console.log 打印在控制台中。

[[ “克隆”步骤在我的脚本中至关重要！如果您忽略它，该功能一开始似乎可以工作，但在第一次过滤操作之后，源对象将被永久更改。 ]]

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>

【讨论】：

我想将食物数组作为结构返回，但只包含过滤后的对象
我的脚本的新版本将返回一个与输入结构完全相同的数组，但包含的list_food-arrays 会被过滤，并且只会包含与给定过滤器字符串匹配的项目。