collecting data from an array of objects & put them in a new array of objects-CodePudding

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?

CodePudding user response：

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]
}, [])

CodePudding user response：

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)