将Javascript对象和子对象转换为对象数组-Lodash

Question

I am looking to change the structure of some data. Below is a sample of the data I am receiving

{
  ID1: {
         firstName: 'John',
         lastName: 'Doe'
      },
  ID2: {
         firstName: 'Jane',
         lastName: 'Doe'
      }
}

What I need to do is convert this into an array with the following format:

[
  { ID: ID1, firstName: 'John', lastName: 'Doe' },
  { ID: ID2, firstName: 'Jane', lastName: 'Doe' }
]

I prefer to use lodash if possible

Answer 1

Use Object.keys() and Array#map() . Object.keys() which helps to get all the properties of the object as an array. Then Array#map() can be used to iterate over the element and generate new array based on the returned element.

 var data = { ID1: { firstName: 'John', lastName: 'Doe' }, ID2: { firstName: 'Jane', lastName: 'Doe' } }; var res = Object.keys(data) // get all object properties as an array .map(function(k) { // iterate and generate new array with custom element return { // generate custom array object based on the property and object and return ID: k, // k is property of ov=bjeck firstName: data[k].firstName, // get inner properties from data object using k larstName: data[k].lastName }; }) console.log(res); 

---

UPDATE : I've created new object instead of updating original object and returned it. If updating original object is not a problem then add additional property to object and return the reference inside the Array#map() callback function. This works if there is any number of inner properties but it updates original object.

 var data = { ID1: { firstName: 'John', lastName: 'Doe' }, ID2: { firstName: 'Jane', lastName: 'Doe' } }; var res = Object.keys(data) // get all object properties as an array .map(function(k) { // iterate and generate new array with custom element data[k].ID = k; // add additional property return data[k]; // return the reference }) console.log(res); 

---

Or in case you want to maintain the object and there is lots of inner object properties then do something like.

 var data = { ID1: { firstName: 'John', lastName: 'Doe' }, ID2: { firstName: 'Jane', lastName: 'Doe' } }; var res = Object.keys(data) // get all object properties as an array .map(function(k) { // iterate and generate new array with custom element var obj = { // create an object to return ID: k }; for (var key in data[k]) // iterate over object property if (data[k].hasOwnProperty(key)) // check the object has the property obj[key] = data[k][key]; // add property to the newly generated object return obj; // return the object }) console.log(res); 

Answer 2

Can you add ID to the objects? If so, then it can be achieved easy with:

var arr = _.values(obj);

Explanation:

Often developers duplicate key inside value to avoid many problems. They do like this:

{
  ID1: {
         ID: ID1,
         firstName: 'John',
         lastName: 'Doe'
      },
  ID2: {
         ID: ID2
         firstName: 'Jane',
         lastName: 'Doe'
      }
}

And then use only one command above and it returns only values of the object and make an array.

If it is not suites for you, then you need to add IDs manually like that:

var arr = _.map(obj, function(value, key) {
  value[ID] = key;
  return value;
});

Be careful, the code will change the original object, but in most of cases it is not a problem, but if you need to avoid this, you need:

var arr = _(obj)
  .clone()
  .map(obj, function(value, key) {
    value[ID] = key;
    return value;
  })
  .value();

Answer 3

You can make use of map() to convert the object into an array and then use assign() to append the ID key value, this also makes sure that the original object does not get mutated.

Here is the ES6 version:

var result = _.map(data, (item, ID) => _.assign({ ID }, item));

 var data = { ID1: { firstName: 'John', lastName: 'Doe' }, ID2: { firstName: 'Jane', lastName: 'Doe' } }; var result = _.map(data, (item, ID) => _.assign({ ID }, item)); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script> 

Here's the es5 version:

var result = _.map(data, function(item, ID) { 
  return _.assign({ ID: ID }, item);
});