如何將過濾器應用於嵌套數組？

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