javascript - transform object to array with lodash

ID : 20365

viewed : 16

Tags : javascriptarraysobjectlodashjavascript

Top 5 Answer for javascript - transform object to array with lodash

vote vote

96

You can do

var arr = _.values(obj); 

For documentation see here.

vote vote

80

A modern native solution if anyone is interested:

const arr = Object.keys(obj).map(key => ({ key, value: obj[key] })); 

or (not IE):

const arr = Object.entries(obj).map(([key, value]) => ({ key, value })); 
vote vote

77

_.toArray(obj); 

Outputs as:

[   {     "name": "Ivan",     "id": 12,     "friends": [       2,       44,       12     ],     "works": {       "books": [],       "films": []     }   },   {     "name": "John",     "id": 22,     "friends": [       5,       31,       55     ],     "works": {       "books": [],       "films": []     }   } ]" 
vote vote

69

For me, this worked:

_.map(_.toPairs(data), d => _.fromPairs([d])); 

It turns

{"a":"b", "c":"d", "e":"f"}  

into

[{"a":"b"}, {"c":"d"}, {"e":"f"}] 
vote vote

60

There are quite a few ways to get the result you are after. Lets break them in categories:

ES6 Values only:

Main method for this is Object.values. But using Object.keys and Array.map you could as well get to the expected result:

Object.values(obj) Object.keys(obj).map(k => obj[k]) 

var obj = {    A: {      name: "John"    },    B: {      name: "Ivan"    }  }    console.log('Object.values:', Object.values(obj))  console.log('Object.keys:', Object.keys(obj).map(k => obj[k]))

ES6 Key & Value:

Using map and ES6 dynamic/computed properties and destructuring you can retain the key and return an object from the map.

Object.keys(obj).map(k => ({[k]: obj[k]})) Object.entries(obj).map(([k,v]) => ({[k]:v})) 

var obj = {    A: {      name: "John"    },    B: {      name: "Ivan"    }  }    console.log('Object.keys:', Object.keys(obj).map(k => ({    [k]: obj[k]  })))  console.log('Object.entries:', Object.entries(obj).map(([k, v]) => ({    [k]: v  })))

Lodash Values only:

The method designed for this is _.values however there are "shortcuts" like _.map and the utility method _.toArray which would also return an array containing only the values from the object. You could also _.map though the _.keys and get the values from the object by using the obj[key] notation.

Note: _.map when passed an object would use its baseMap handler which is basically forEach on the object properties.

_.values(obj) _.map(obj) _.toArray(obj) _.map(_.keys(obj), k => obj[k]) 

var obj = {    A: {      name: "John"    },    B: {      name: "Ivan"    }  }    console.log('values:', _.values(obj))  console.log('map:', _.map(obj))  console.log('toArray:', _.toArray(obj))  console.log('keys:', _.map(_.keys(obj), k => obj[k]))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Lodash Key & Value:

// Outputs an array with [[KEY, VALUE]] _.entries(obj) _.toPairs(obj)  // Outputs array with objects containing the keys and values _.map(_.entries(obj), ([k,v]) => ({[k]:v})) _.map(_.keys(obj), k => ({[k]: obj[k]})) _.transform(obj, (r,c,k) => r.push({[k]:c}), []) _.reduce(obj, (r,c,k) => (r.push({[k]:c}), r), []) 

var obj = {    A: {      name: "John"    },    B: {      name: "Ivan"    }  }    // Outputs an array with [KEY, VALUE]  console.log('entries:', _.entries(obj))  console.log('toPairs:', _.toPairs(obj))    // Outputs array with objects containing the keys and values  console.log('entries:', _.map(_.entries(obj), ([k, v]) => ({    [k]: v  })))  console.log('keys:', _.map(_.keys(obj), k => ({    [k]: obj[k]  })))  console.log('transform:', _.transform(obj, (r, c, k) => r.push({    [k]: c  }), []))  console.log('reduce:', _.reduce(obj, (r, c, k) => (r.push({    [k]: c  }), r), []))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Note that in the above examples ES6 is used (arrow functions and dynamic properties). You can use lodash _.fromPairs and other methods to compose an object if ES6 is an issue.

Top 3 video Explaining javascript - transform object to array with lodash

Related QUESTION?