从对象数组中收集数据并将它们放入新的对象数组中

Question

我有一个名为 Lines 的对象数组。 Lines数组位于rows数组内，而 rows 数组位于tabs数组内。 我想从行数组中获取一些数据并将它们放入另一个名为colors的数组中

数组看起来像这样----

 "tabs": [{ "selectedHouseType": "1", "rows": [{ "selectedDecor": "2", "lines": [{ "selectedColor": "white", "selectedQty": 0, "selectedUnit": "1", }, { "selectedColor": "black", "selectedQty": "2", "selectedUnit": "3", }] }, { "selectedDecor": "1", "lines": [{ "selectedColor": "black", "selectedQty": 0, "selectedUnit": "2", " }] }] }, { "selectedHouseType": "select", "rows": [{ "selectedDecor": "2", "lines": [{ "selectedColor": "red", "selectedQty": 0, "selectedUnit": "", }] }] }]

我想从lines数组中收集数据并将它们放入另一个名为“ colors ”的数组中

看起来像这样---

colors:  [{
          "selectedColor": "white",
          "selectedQty": 0,
          "selectedUnit": "1",

        }, {
          "selectedColor": "black",
          "selectedQty": "2",
          "selectedUnit": "3",
        },
        {
          "selectedColor": "black",
          "selectedQty": 0,
          "selectedUnit": "2",
        },
        {
          "selectedColor": "red",
          "selectedQty": 0,
          "selectedUnit": "",
        }
]

我正在使用vue.js 。 我该怎么做呢？

Answer 1

尝试这个：

const colors = tabs.reduce((acc, tab) => {
    const rows = tab.rows
    const lines = rows.reduce((acc, row) => {
        const lines = row.lines
        return [...acc, ...lines]
    }, [])
    return [...acc, ...lines]
}, [])

Answer 2

你可以使用flatMap做这样的事情

 const data = { "tabs":[ { "selectedHouseType":"1", "rows":[ { "selectedDecor":"2", "lines":[ { "selectedColor":"white", "selectedQty":0, "selectedUnit":"1" }, { "selectedColor":"black", "selectedQty":"2", "selectedUnit":"3" } ] } ] }, { "selectedHouseType":"select", "rows":[ { "selectedDecor":"2", "lines":[ { "selectedColor":"red", "selectedQty":0, "selectedUnit":"" } ] } ] } ] } const lineColors = data.tabs.flatMap(t => t.rows.flatMap(r => r.lines)) console.log(lineColors)