Javascript map array of objects

• 29 Sep, 2021
• 3 min read

Let's suppose you have the following JavaScriptMap object:

const myMap = new Map();
myMap.set('foo', 1);
myMap.set('bar', 2);
myMap.set('baz', 3);

To convert it into an array of objects, for example, like so:

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */

You can do any of the following:

• Use Array.from();
• Use the spread operator with Array.prototype.map();
• Iterate over Map and add elements to array.

Using Array.from()

Since Array.from() works on iterables such as Map, you can simply pass it as an argument to Array.from(). This would result in an array of arrays containing key and value from the Map. To illustrate this, consider for example, the following:

const arr = Array.from(myMap);

console.log(arr); // [['foo', 1], ['bar', 2], ['baz', 3]]

To transform this array of arrays into an array of objects, you can simply pass a map function as the second (optional) argument to Array.from() which will be called on every element of the array. For example:

const arr = Array.from(myMap, function (item) {
    return { key: item[0], value: item[1] }
});

console.log(arr);

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */

You can shorten the map function to a one-liner by using; an arrow function, and destructing syntax in the callback function argument, like so:

const arr = Array.from(myMap, ([key, value]) => ({ key, value }));

console.log(arr);

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */

Using the Spread Operator With Array.prototype.map()

You can use the spread operator on Map to unpack its elements into an array, for example, like so:

const arr = [...myMap];

console.log(arr); // [['foo', 1], ['bar', 2], ['baz', 3]]

As you can see, this results in an array of arrays containing key and value from the Map object. To transform this into an array of objects instead, you can call the Array.prototype.map() method on the resulting array, for example, in the following way:

const arr = [...myMap].map(function (item) {
    return { key: item[0], value: item[1] }
});

console.log(arr);

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */

You can shorten the map function to a one-liner by using; an arrow function, and destructing syntax in the callback function argument, like so:

const arr = [...myMap].map(([key, value]) => ({ key, value }));

console.log(arr);

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */

Iterating Over Map and Adding Elements to Array

You can simply iterate over the Map object using any compatible iteration method and add each item as an object to the resulting array.

For example, you can use Map.prototype.forEach() in the following way:

const arr = [];

myMap.forEach((value, key) => arr.push({ key, value }));

console.log(arr);

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */

Or, alternatively, you may use the for...of loop like so:

const arr = [];

for (const [key, value] of myMap) {
    arr.push({ key, value });
}

console.log(arr);

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */

Hope you found this post useful. It was published 29 Sep, 2021. Please show your love and support by sharing this post.