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

Question

I have an array of objects Called Lines. The Lines array is inside rows array & the rows array is inside tabs array. I want to take some data from lines array & put them in another array called colors

the array look like this----

 "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": "", }] }] }]

I want to collect the datas from lines array & put them in another array called " colors "

which will look like this---

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

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

I am using vue.js . How do I do this?

Answer 1

Try this:

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

you can do something like this using 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)