How to render two different arrays data into a single array of objects?

Question

In my react state, I have data coming in into two different arrays and I would like my component to put both arrays data in a single array. This is the data format that I have for both arrays:

data: {
  array1: [
    {
      name: "John Doe"
    },
    {
      name: "Bob Williams"
    }
  ]

  array2: [
    {
      name: "Clark Kent"
    },
    {
      name: "Bruce Wayne"
    }
  ]
}

How can I make my code return data so the end result looks like the defined below:

_.map(Object.values(this.state.data), (item,key) => {
  return _.map(item, (data) => {
    return {
      name: data.name
    }
  })
})

Desired output:

data: [
  { name: "John Doe" },
  { name: "Bob Williams" },
  { name: "Clark Kent" },
  { name: "Bruce Wayne" }
]

Nguyễn Văn Phong · Accepted Answer · 2021-04-10 06:47:11Z

4

You can use Spread operator ... to merge 2 arrays into one.

const data = {array1:[{name:"John Doe"},{name:"Bob Williams"}],array2:[{name:"Clark Kent"},{name:"Bruce Wayne"}]};;

const result = {data: [...data.array1, ...data.array2]};
console.log(result);

edited Apr 10, 2021 at 6:47

answered Apr 10, 2021 at 6:28

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shaun Over a year ago

Thanks Nguyen for the response. This looks good. Will this also work if I have other properties inside both arrays and if I want to target the other properties to display the data on the page?

Nguyễn Văn Phong Over a year ago

Yes, it is @Shaun

zixiCat · Accepted Answer · 2021-04-10 06:33:45Z

0

Use Array.prototype.flat()

const data = Object.values(this.state.data).flat();

answered Apr 10, 2021 at 6:33

zixiCat

1,0591 gold badge7 silver badges18 bronze badges

Comments

user11081925 · Accepted Answer · 2021-04-10 06:38:08Z

0

Object.values(this.state.data).reduce((p, c) => p.concat(c), []);

answered Apr 10, 2021 at 6:38

user11081925

Collectives™ on Stack Overflow

How to render two different arrays data into a single array of objects?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related