Flattening an array of complex objects with an array attribute

Question

i was wondering if there is quick solution (using map() for example) to convert a multidimensional array to a single dimensional array, that still keeps all information of the original array.

You can solve it with some loops, but i think there must be a smarter solution.

To explain it a bit more here is an example:

const arr = [{
  id: 1,
  people: [
    {name: "x", surname: "x"},
    {name: "y", surname: "y"}
  ]
 },{
  id: 2,
  people: [
    {name: "a", surname: "a"},
    {name: "b", surname: "b"}
  ]
 }]

const result = [
 {id: 1, name: "x", surname: "x"},
 {id: 1, name: "y", surname: "y"},
 {id: 2, name: "a", surname: "a"},
 {id: 2, name: "b", surname: "b"}
]

Ori Drori · Accepted Answer · 2019-06-28 12:28:11Z

2

Use Array.flatMap() with an internal Array.map() to add the id:

const arr = [{"id":1,"people":[{"name":"x","surname":"x"},{"name":"y","surname":"y"}]},{"id":2,"people":[{"name":"a","surname":"a"},{"name":"b","surname":"b"}]}]
 
const result = arr.flatMap(({ id, people }) => people.map(p => ({ id, ...p })))

console.log(result)

If Array.flatMap() is not supported by your target browsers, use Array.map(), and spread into Array.concat():

const arr = [{"id":1,"people":[{"name":"x","surname":"x"},{"name":"y","surname":"y"}]},{"id":2,"people":[{"name":"a","surname":"a"},{"name":"b","surname":"b"}]}]
 
const result = [].concat(...arr.map(({ id, people }) => people.map(p => ({ id, ...p }))))

console.log(result)

edited Jun 28, 2019 at 12:28

answered Jun 28, 2019 at 12:17

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

2 Comments

Martin2904 Over a year ago

Is there a smart way to add the id to every object in the array? flatMap() does the right think but the id field is lost.

Ori Drori Over a year ago

Missed that. You just need to map the people as well, and add the id. See update.

briosheje · Accepted Answer · 2019-06-28 12:28:17Z

You can use array.reduce to create multiple entries for each people, assuming the array never changes its form. Further comments about how it works are directly in the code.

const arr = [{
  id: 1,
  people: [
    {name: "x", surname: "x"},
    {name: "y", surname: "y"}
  ]
 },{
  id: 2,
  people: [
    {name: "a", surname: "a"},
    {name: "b", surname: "b"}
  ]
 }]

// Reduce the origianal array.
const r = arr.reduce((acc, {id, people}) => {
  // For each people, push a new elemen to the array.
  return people.forEach(_people => {
    // the element pushed will hold the [id] and all the properties of the currently looped [people] item.
    acc.push(Object.assign({id}, _people));
  }), acc; // <-- finally, return the accumulator for the next iteration.
}, []); // <-- provide a new empty array as an initial value.
console.log(r);

Mamun · Accepted Answer · 2019-06-28 12:28:44Z

1

You can try with map() and flat()

const arr = [{
  id: 1,
  people: [
    {name: "x", surname: "x"},
    {name: "y", surname: "y"}
  ]
 },{
  id: 2,
  people: [
    {name: "a", surname: "a"},
    {name: "b", surname: "b"}
  ]
 }]

const result = arr.map(p => {
  return p.people.map(pi => Object.assign(pi, {id: p.id}));
}).flat();
console.log(result);

edited Jun 28, 2019 at 12:28

answered Jun 28, 2019 at 12:18

Mamun

69k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Flattening an array of complex objects with an array attribute

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

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

Linked

Related