使用map()和filter()過濾深度嵌套的物件陣列

我有下面的嵌套資料陣列。我想過濾第二級子級，只留下名稱為“助手”或“顧問”的子級，同時保持底層資料結構的其余部分相同。

data = [{
  "name": "root",
  "median": 60000.0,
  "children": [{
      "name": "Defence",
      "median": 60000.0,
      "children": [{
          "name": "Assistant",
          "median": 30000.0,
        },
        {
          "name": "Advisor",
          "median": 50000.0,
        },
        {
          "name": "Secretary",
          "median": 60000.0,
        },
        {
          "name": "Administrator",
          "median": 60000.0,
        },
        {
          "name": "Assistant",
          "median": 20000.0,
        },
      ]
    },
    {
      "name": "Healthcare",
      "median": 60000,
      "children": [{
          "name": "Manager",
          "median": 80000,
        },
        {
          "name": "Advisor",
          "median": 60000,
        },
        {
          "name": "Legal",
          "median": 20000,
        },
        {
          "name": "Cashier",
          "median": 30000,
        },
      ]
    }
  ]
}]

期望的結果使上層孩子保持不變，同時回傳匹配“助手”和“顧問”的第二層孩子。

data = [{
  "name": "root",
  "median": 60000.0,
  "children": [{
      "name": "Defence",
      "median": 60000.0,
      "children": [{
          "name": "Assistant",
          "median": 30000.0,
        },
        {
          "name": "Advisor",
          "median": 50000.0,
        },
        {
          "name": "Assistant",
          "median": 20000.0,
        },
      ]
    },
    {
      "name": "Healthcare",
      "median": 60000,
      "children": [{
          "name": "Advisor",
          "median": 60000,
        },
      ]
    }
  ]
}]

我嘗試使用 and 的組合，map()但filter()它只回傳匹配的二級子級。

var fmatch = ["Assistant", "Advisor"]
console.log(data.map(c=> c.children.map(c => c.children.filter(c => fmatch.includes(c.name)))))

顯示代碼片段

data = data = [{
  "name": "root",
  "median": 60000.0,
  "children": [{
      "name": "Defence",
      "median": 60000.0,
      "children": [{
          "name": "Assistant",
          "median": 30000.0,
        },
        {
          "name": "Advisor",
          "median": 50000.0,
        },
        {
          "name": "Secretary",
          "median": 60000.0,
        },
        {
          "name": "Administrator",
          "median": 60000.0,
        },
        {
          "name": "Assistant",
          "median": 20000.0,
        },
      ]
    },
    {
      "name": "Healthcare",
      "median": 60000,
      "children": [{
          "name": "Manager",
          "median": 80000,
        },
        {
          "name": "Advisor",
          "median": 60000,
        },
        {
          "name": "Legal",
          "median": 20000,
        },
        {
          "name": "Cashier",
          "median": 30000,
        },
      ]
    }
  ]
}]

var fmatch = ["Assistant", "Advisor"]
console.log(data.map(c=> c.children.map(c => c.children.filter(c => fmatch.includes(c.name)))))

uj5u.com熱心網友回復：

forEach當您要修改底層資料結構時，您需要使用回圈。Array.prototype.map()所做的只是根據提供的標準回傳一個新陣列。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

顯示代碼片段

data = data = [{
  "name": "root",
  "median": 60000.0,
  "children": [{
      "name": "Defence",
      "median": 60000.0,
      "children": [{
          "name": "Assistant",
          "median": 30000.0,
        },
        {
          "name": "Advisor",
          "median": 50000.0,
        },
        {
          "name": "Secretary",
          "median": 60000.0,
        },
        {
          "name": "Administrator",
          "median": 60000.0,
        },
        {
          "name": "Assistant",
          "median": 20000.0,
        },
      ]
    },
    {
      "name": "Healthcare",
      "median": 60000,
      "children": [{
          "name": "Manager",
          "median": 80000,
        },
        {
          "name": "Advisor",
          "median": 60000,
        },
        {
          "name": "Legal",
          "median": 20000,
        },
        {
          "name": "Cashier",
          "median": 30000,
        },
      ]
    }
  ]
}]

var fmatch = ["Assistant", "Advisor"]
data.forEach(c => {
    c.children.forEach(c => {
        c.children = c.children.filter(c => fmatch.includes(c.name))
    })
})
console.log(data)

uj5u.com熱心網友回復：

您可以只使用一個簡單的回圈來迭代每個父級，并且只在需要時使用過濾器。

如果您仍想使用.map()，則需要回傳完整物件而不是僅回傳過濾后的陣列

顯示代碼片段

data = [{
  "name": "root",
  "median": 60000.0,
  "children": [{
      "name": "Defence",
      "median": 60000.0,
      "children": [{
          "name": "Assistant",
          "median": 30000.0,
        },
        {
          "name": "Advisor",
          "median": 50000.0,
        },
        {
          "name": "Secretary",
          "median": 60000.0,
        },
        {
          "name": "Administrator",
          "median": 60000.0,
        },
        {
          "name": "Assistant",
          "median": 20000.0,
        },
      ]
    },
    {
      "name": "Healthcare",
      "median": 60000,
      "children": [{
          "name": "Manager",
          "median": 80000,
        },
        {
          "name": "Advisor",
          "median": 60000,
        },
        {
          "name": "Legal",
          "median": 20000,
        },
        {
          "name": "Cashier",
          "median": 30000,
        },
      ]
    }
  ]
}]

var fmatch = ["Assistant", "Advisor"];

const filteredData = data;
filteredData.forEach(item => {
  item.children.forEach(firstChild => {
    firstChild.children = firstChild.children.filter(c => fmatch.includes(c.name));
  });
});

console.log(filteredData);

標籤：javascript数组json

上一篇：如何添加到陣列的每個元素

下一篇：如何在java中回傳選單的開頭