Map a JavaScript object to an array
Ever wanted to map an object to an array of objects using a custom mapping function? This can be useful when you need to separate a dictionary-like object into individual objects, including the keys as properties.
Convert an object to an array of objects
The simplest way to get the key-value pairs of an object is to use Object.entries()
. Then, using Array.prototype.map()
and a mapping function, you can map the key-value pairs to an array of objects.
const listify = (obj, mapFn) => Object.entries(obj).map(([key, value]) => mapFn(key, value)); const people = [ { name: 'John', age: 42 }, { name: 'Adam', age: 39 }, ]; listify(people, (key, value) => ({ name: key, ...value })); // [ { name: 'John', age: 42 }, { name: 'Adam', age: 39 } ]
Convert an array of objects to an object
Conversely, what about the opposite? You can simply use Object.fromEntries()
to convert an array of objects to an object. The mapFn
function should return a 2-element array with the key-value pair.
const delistify = (arr, mapFn) => Object.fromEntries(arr.map(mapFn)); const people = [ { name: 'John', age: 42 }, { name: 'Adam', age: 39 }, ]; delistify(people, (obj) => { const { name, ...rest } = obj; return [name, rest]; }); // { John: { age: 42 }, Adam: { age: 39 } }