Creating Arrays of Objects in nested Objects with Javascript

Question

Given the following javascript object structure, which is typically what is returned by firebase

var data = {
  'id1' : {
    'fname' : 'value',
    'lname' : 'value',
    'things' : {
      'thing1' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing2' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing3' : {
        'brand' : 'value',
        'name' : 'value'
      }
    }
  },
  'id2' : {
    'fname' : 'value',
    'lname' : 'value',
    'things' : {
      'thing1' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing2' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing3' : {
        'brand' : 'value',
        'name' : 'value'
      }
    }
  }
};

How would you convert it to

[
  {
    'fname' : 'value',
    'lname' : 'value,
    'things' : [
      {
        'brand' : 'value',
        'name' : 'value'
      },
      {
        'brand' : 'value',
        'name' : 'value'
      },
      {
        'brand' : 'value',
        'name' : 'value'
      }
    ]
  },
  {
    'fname' : 'value',
    'lname' : 'value,
    'things' : [
      {
        'brand' : 'value',
        'name' : 'value'
      },
      {
        'brand' : 'value',
        'name' : 'value'
      },
      {
        'brand' : 'value',
        'name' : 'value'
      }
    ]
  }
]

Keeping in mind that the nested objects could get deeper than this. There are many implementations to convert nested structures to arrays, but I have not seen anyone make this specific conversion. I've been racking my brain for a while and have only come very close but have yet to get it just right.

I already have this code which doesn't do anything with deeper objects like 'things'.

var collection = [];
for(key in data) {
  collection.push(data[key]);
}

I'm struggling with making it recursive.

EDIT I would imagine it needs to be in wrapped in a function that can call itself so that it can be made recursive.

possible duplicate of How might I extract the property values of a JavaScript object into an array? — Frank van Puffelen
– Frank van Puffelen, Commented Jul 28, 2015 at 12:18
@FrankvanPuffelen This is not a duplicate of that. I already have that code. I'm looking for it to go deeper and iterate over all levels of the object. The question and answer you link to is doing exactly what I already have working. — Mark Garrigan
– Mark Garrigan, Commented Jul 28, 2015 at 14:29
should the key name indicate the array ordering? e.g.(id1, id2 / thing1 thing2) if so what is the rule? — Luke
– Luke, Commented Jul 28, 2015 at 15:49
@LukeP the key does not indicate ordering. The object is ordered on the server before being set to the data variable. — Mark Garrigan
– Mark Garrigan, Commented Jul 28, 2015 at 16:28

Brent Hagany · Accepted Answer · 2015-07-28 16:18:27Z

2

Here's a solution that doesn't require knowing the keys, assuming that you want to convert every other level of nesting:

function toArrayOfObjects(obj) {
  var collection = [];
  for (key in obj) {
    var value = obj[key];
    if (typeof value === 'object' && !Array.isArray(value)) {
      var childObj = {};
      for (childKey in value) {
        var childValue = value[childKey];
        if (typeof childValue === 'object' && !Array.isArray(childValue)) {
          childObj[childKey] = toArrayOfObjects(childValue);
        } else {
          childObj[childKey] = childValue;
        }
      }
      collection.push(childObj);
    } else {
      collection.push(value);
    }
  }
  return collection;
}

answered Jul 28, 2015 at 16:18

Brent Hagany

461 bronze badge

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

Comments

Frank van Puffelen · Accepted Answer · 2015-07-28 15:41:07Z

1

Something like this should do the trick:

function convert(object, propNamesToConvert) {
  var array = [];
  Object.keys(object).forEach(function(key) {
    array.push(visit(object[key], propNamesToConvert));
  });
  return array;
}

function visit(object, propNamesToConvert) {
  var result = {};
  Object.keys(object).forEach(function(key) {
    var value = object[key];
    if (typeof(value) === 'object') {
      // objects are either 'things to be converted' or we need to traverse further down the rabbit hole
      if (propNamesToConvert.indexOf(key) >= 0) {
        value = convert(value, propNamesToConvert);
      }
      else {
        value = visit(value, propNamesToConvert);
      }
    }
    result[key] = value;
  });
  return result;
}

console.log(JSON.stringify(visit(data, ['things'])));

It could probably be shortened considerably, but this works. It would be way better to translate the hard-coded ['things'] into something that is less maintenance-prone.

var data = {
  'id1' : {
    'fname' : 'value',
    'lname' : 'value',
    'things' : {
      'thing1' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing2' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing3' : {
        'brand' : 'value',
        'name' : 'value'
      }
    }
  },
  'id2' : {
    'fname' : 'value',
    'lname' : 'value',
    'things' : {
      'thing1' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing2' : {
        'brand' : 'value',
        'name' : 'value'
      },
      'thing3' : {
        'brand' : 'value',
        'name' : 'value'
      }
    }
  }
};

function convert(object, propNamesToConvert) {
  var array = [];
  Object.keys(object).forEach(function(key) {
    array.push(visit(object[key], propNamesToConvert));
  });
  return array;
}

function visit(object, propNamesToConvert) {
  var result = {};
  Object.keys(object).forEach(function(key) {
    var value = object[key];
    if (typeof(value) === 'object') {
      if (propNamesToConvert.indexOf(key) >= 0) {
        value = convert(value, propNamesToConvert);
      }
      else {
        value = visit(value, propNamesToConvert);
      }
    }
    result[key] = value;
  });
  return result;
}

console.log(JSON.stringify(visit(data, ['things'])));

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

answered Jul 28, 2015 at 15:41

Frank van Puffelen

603k85 gold badges895 silver badges868 bronze badges

2 Comments

Mark Garrigan Over a year ago

Thanks Frank. Brent's solution and the one I'll select as the answer needs no knowledge of keys.

Frank van Puffelen Over a year ago

Sounds good. Keep it mind that both solutions makes an assumption about your data structure (one makes an implicit assumption, the other an explicit one). Such choices are necessary, since you're dealing with a schemaless model so it is not clear from the JSON data itself which level(s) needs to be flattened into an array.

Peter Peng · Accepted Answer · 2015-07-28 05:05:42Z

0

var newData = [];
var dataKeys = Object.keys(data);
for(var i=0; i<dataKeys.length; i++)
{
    newData.push(data[dataKeys[i]]);
}

answered Jul 28, 2015 at 5:05

Peter Peng

1,9581 gold badge27 silver badges38 bronze badges

1 Comment

Mark Garrigan Over a year ago

This doesn't take care of the deeper objects like 'things'.

Collectives™ on Stack Overflow

Creating Arrays of Objects in nested Objects with Javascript

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related