Flatten nested array with key value pairs in Javascript

Question

Given an array like this:

[
    { id: 1, emailAddresses: ["[email protected]", "[email protected]"] },
    { id: 2, emailAddresses: ["[email protected]" },
    { id: 3, emailAddresses: ["[email protected]", "[email protected]", "[email protected]"]
]

How could I use Javascript to reduce this to an array like this:

[
    { id: 1, emailAddress: "[email protected]" },
    { id: 1, emailAddress: "[email protected]" },
    { id: 2, emailAddress: "[email protected]" },
    { id: 3, emailAddress: "[email protected]" },
    { id: 3, emailAddress: "[email protected]" },
    { id: 3, emailAddress: "[email protected]" }
 ]

I've read about the functions reduce, flat, map and so on and read lots of the questions on SO about using them but I can't find anything that's asking quite the same as this and I can't get my head around using those functions to do it.

adiga · Accepted Answer · 2019-08-08 15:59:01Z

3

You could use flatMap

const input = [
    { id: 1, emailAddresses: ["[email protected]", "[email protected]"] },
    { id: 2, emailAddresses: ["[email protected]"] },
    { id: 3, emailAddresses: ["[email protected]", "[email protected]", "[email protected]"] }
]

const output = input.flatMap(o => 
    o.emailAddresses.map(e => ({ id: o.id, emailAddress: e }) )
)

console.log(output)

If flatMap is not supported, you could use a nested for...of loop:

const input = [{id:1,emailAddresses:["[email protected]","[email protected]"]},{id:2,emailAddresses:["[email protected]"]},{id:3,emailAddresses:["[email protected]","[email protected]","[email protected]"]}];
const output = []

for (const { id, emailAddresses } of input)
  for (const emailAddress of emailAddresses)
    output.push({ id, emailAddress })

console.log(output)

edited Aug 8, 2019 at 15:59

answered Aug 8, 2019 at 15:53

adiga

35.4k9 gold badges65 silver badges88 bronze badges

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

1 Comment

Philip Stratford Over a year ago

It's a shame flatMap isn't more widely supported at the moment, that is the cleanest looking of all the solutions. Thanks!

Tom · Accepted Answer · 2019-08-08 15:57:31Z

2

You can map over your data and then use reduce to flatten the resulting array:

const result = data
  .map(datum => {
    return datum.emailAddresses.map(emailAddress => {
      return { id: datum.id, emailAddress };
    });
  })
  .reduce((result, current) => {
    return [...result, ...current];
  }, []);

answered Aug 8, 2019 at 15:57

Tom

2,9742 gold badges25 silver badges41 bronze badges

Comments

Amardeep Bhowmick · Accepted Answer · 2019-08-08 16:01:50Z

2

We can use Array.prototype.reduce to go over each object in the array and take into consideration the multiple values in the emailAddress property array and create separate object for each one and finally accumulate the new objects in the new array (r):

const data = [
    { id: 1, emailAddresses: ["[email protected]", "[email protected]"] },
    { id: 2, emailAddresses: ["[email protected]"] },
    { id: 3, emailAddresses: ["[email protected]", "[email protected]", "[email protected]"]}
]
const flat = data.reduce((r, e) => {
  e.emailAddresses.forEach((obj) => r.push({id: e.id, emailAddresses : obj }));
  return r;
}, []);
console.log(flat);

edited Aug 8, 2019 at 16:01

answered Aug 8, 2019 at 15:56

Amardeep Bhowmick

17k3 gold badges33 silver badges46 bronze badges

Comments

Bill Cheng · Accepted Answer · 2019-08-08 16:03:50Z

2

You can use reduce and map

const data = [
    { id: 1, emailAddresses: ["[email protected]", "[email protected]"] },
    { id: 2, emailAddresses: ["[email protected]"] },
    { id: 3, emailAddresses: ["[email protected]", "[email protected]", "[email protected]"]}
]

const flat = (toFlatten) => 
  toFlatten.reduce((r,c)=> {
    r.push(...c.emailAddresses.map(email=>({id: c.id, emailAddress: email})))
    return r
  }, [])

console.log(flat(data))

answered Aug 8, 2019 at 16:03

Bill Cheng

9567 silver badges9 bronze badges

Comments

briosheje · Accepted Answer · 2019-08-08 16:11:35Z

Here is a solution that doesn't use any array prototype but does, instead, take advantage of function generators.

The script below iterates the array, acquire all keys of the element except emailAddresses, which is handled separately, and for each email address it yields an object filled with the single email address and the rest of the data.

This solution iterate the original array only once.

Because it uses function generators, this solution is widely supported, it just won't work on IE due it's lack of support for function generators, despite babel or TSC can easily add compatibility to that.

const input = [
    { id: 1, emailAddresses: ["[email protected]", "[email protected]"] },
    { id: 2, emailAddresses: ["[email protected]"] },
    { id: 3, emailAddresses: ["[email protected]", "[email protected]", "[email protected]"] }
];

function* flattenEmailAddresses(arr) {
  for (var {emailAddresses, ...keys} of arr) {
    for (var emailAddress of emailAddresses) yield {...keys, emailAddress};
  }
}

console.log([...flattenEmailAddresses(input)]);

Collectives™ on Stack Overflow

Flatten nested array with key value pairs in Javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related