Transforming nested objects to an array

Question

I have an object that contains other objects, such as:

let foo = {
  a: {
    b: {},
    c: {}
  },
  d: {
    e: {}
  }
};

Now I want to transform this into an array of objects, where the keys of the first two levels form a key / value pair, such as:

let transformedFoo = [
  { outer: 'a', inner: 'b' },
  { outer: 'a', inner: 'c' },
  { outer: 'd', inner: 'e' }
];

My current approach looks like this:

let fooTransformed = [];

Object.keys(foo).forEach(function (outerKey) {
  Object.keys(foo[outerKey]).forEach(function (innerKey) {
    fooTransformed.push({
      outer: outerKey,
      inner: innerKey
    });
  });
});

It works, but I think it's not "nice" (i.e., it's not nice to have two nested loops). Is there a better way on how to achieve this (I could imagine that there is a quite elegant purely functional solution, but I can't think of any)?

Logically, nested manipulation would require another nested loop (or conditional). A "functional" approach would just hide this fact from view. — David Pullar
– David Pullar, Commented Jan 27, 2015 at 20:46
@DavidPullar is right, instead of a nested loop, you'll have a nested map, plus a reduce to flatten out the results. See below — tlehman
– tlehman, Commented Jan 27, 2015 at 21:02

tlehman · Accepted Answer · 2015-01-27 20:50:49Z

2

Using map and reduce:

> Object.keys(foo).map(function(key) { 
      return Object.keys(foo[key]).map(function(val) {
          return {outer: key, inner: val} } ) 
      }).reduce(function(a,b) { return a.concat(b) })

[ { outer: 'a', inner: 'b' },
  { outer: 'a', inner: 'c' },
  { outer: 'd', inner: 'e' } ]

answered Jan 27, 2015 at 20:50

tlehman

5,1672 gold badges36 silver badges53 bronze badges

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

3 Comments

lemieuxster Over a year ago

you can improve on this and retain the original two loops if you combine the first map with the last reduce.

Object.keys(foo).reduce(function(reduced, key) {        return reduced.concat(Object.keys(foo[key]).map(function(val) {           return {outer: key, inner: val} } ))        }, []);

Golo Roden Over a year ago

It works, and it is a functional approach, hence I accepted it and +1ed it. Anyway, I'm going to stick with my original version, though ;-)

tlehman Over a year ago

It's good to try and see if other approaches offer something really beneficial. Your approach is much clearer what is going on.

Collectives™ on Stack Overflow

Transforming nested objects to an array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related