如何将过滤器应用于嵌套数组？

Question

我试图在多个数组上创建一个多重过滤器，但我不知道如何在不复制嵌套数组的情况下对其进行过滤。 我正在将vuejs与一些正在使用数组的插件一起使用，所以我实际上不能更改它，只需过滤即可。

我正在使用draggablevue显示可以排序的数组列表。 我希望主数组保持不变，仅按名称或代码过滤“ inv”数组。 我玩过forEach，地图，过滤器，但找不到任何在线帮助我解决此问题的方法。

let invNameFilter = " cadeira";
let invCodeNameFilter = "1234";
let salas = [
        {
          name: "Sala 1.14",
          inv: [
            {
              name: "cadeira",
              inventoryCode: "1234"
            },
            {
              name: "quadro",
              inventoryCode: "4321"
            },
            {
              name: "mesa",
              inventoryCode: "1234"
            }
          ]
        },
        {
          name: "Sala 1.12",
          inv: [
            {
              name: "mesa",
              inventoryCode: "4321"
            },
            {
              name: "cadeira",
              inventoryCode: "4321"
            }
          ]
        }
      ];

let invNameFilter = " cadeira";
let invCodeNameFilter = "1234";
let salas = [
        {
          name: "Sala 1.14",
          inv: [
            {
              name: "cadeira",
              inventoryCode: "1234"
            },
            {
              name: "mesa",
              inventoryCode: "1234"
            }
          ]
        },
        {
          name: "Sala 1.12",
          inv: [
            {
              name: "cadeira",
              inventoryCode: "4321"
            }
          ]
        }
      ];

Answer 1

请注意，此代码不会传递初始salas数组。

 new Vue({ data() { return { name: "cadeira", code: "1234", salas: [{ name: "Sala 1.14", inv: [{ name: "cadeira", inventoryCode: "1234" }, { name: "quadro", inventoryCode: "4321" }, { name: "mesa", inventoryCode: "1234" } ] }, { name: "Sala 1.12", inv: [{ name: "mesa", inventoryCode: "4321" }, { name: "cadeira", inventoryCode: "4321" } ] } ] } }, computed: { filteredSalas() { // as alternative use _.deepClone (lodash function) const arr = JSON.parse(JSON.stringify(this.salas)); arr.forEach(obj => { obj.inv = obj.inv.filter(item => item.name === this.name && item.inventoryCode === this.code); }); return arr; } }, template: "<div>{{ filteredSalas }}</div>" }).$mount("#app"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div> 

Answer 2

假设您的对象结构保持不变，则可以混合使用map ， filter和Object spread操作。

• 地图（因为您需要所有外部对象）
• 传播操作（覆盖将要过滤的inv ）
• 在inv过滤（应用过滤器功能以返回所需的结果）

 const salas = [ { name: "Sala 1.14", inv: [ { name: "cadeira", inventoryCode: "1234" }, { name: "quadro", inventoryCode: "4321" }, { name: "mesa", inventoryCode: "1234" } ] }, { name: "Sala 1.12", inv: [ { name: "mesa", inventoryCode: "4321" }, { name: "cadeira", inventoryCode: "4321" } ] } ]; const filteredSalas = salas.map(x => ({ ...x, inv: x.inv.filter(k => k.name === "cadeira" || k.inventoryCode === "1234") })) console.log(filteredSalas);