JavaScript maps are a great way to store data. However, sometimes you might have to convert a map to an array of objects. You can convert map values to an object in JavaScript using –
1. Array.from() method
2. Using the spread operator with Array.prototype.map()
3. Using the forEach() method
Let’s see each of these methods to convert map values to an object in JavaScript in detail below.
1. Array.from() Method
If you have a map, such as:
const myMap = new Map();
myMap.set("1", "value1");
myMap.set("2", "value2");
myMap.set("3", "value3");You can convert it to an array of objects using the Array.from() method:
const mapAsArray = Array.from(myMap);
console.log(mapAsArray);
//This will output:
//[ [ "1", "value1" ], [ "2", "value2" ], [ "3", "value3" ] ]The Array.from() method converts the iterable into a new array instance and returns it.
To convert this array of arrays into an array of objects, you can pass a map function as the second argument to the Array.from() method. This map function will take each array element, which is itself an array, and convert it into an object with a property named key and value:
const mapAsArray = Array.from(myMap, ([key,value]) => ({key,value}));
console.log(mapAsArray);
//This will output:
//[ { key: "1", value: "value1" },
//{ key: "2", value: "value2" },
//{ key: "3", value: "value3" } ]You can also pass a function as the second argument that will do the same thing:
const mapAsArray = Array.from(myMap, function (item) {
return {key: item[0], value: item[1]};
});
console.log(mapAsArray);
//This will output:
// { key: "1", value: "value1" },
//{ key: "2", value: "value2" },
//{ key: "3", value: "value3" } ]2. Using the Spread Operator with Array.prototype.map()
If you have a map, such as:
const myMap = new Map();
myMap.set("1", "value1");
myMap.set("2", "value2");
myMap.set("3", "value3");You can convert it to an array of objects using the spread operator with Array.prototype.map():
const arr = [...myMap];
console.log(arr);
//This will output:
//[ [ "1", "value1" ], [ "2", "value2" ], [ "3", "value3" ] ]You can use the map method to convert this array into an array of objects, with each object having a key and value property:
const mapAsArray = arr.map((value, key) => ({key, value}))
console.log(mapAsArray);
//This will output:
//{ key: "1", value: "value1" },
//{ key: "2", value: "value2" },
//{ key: "3", value: "value3" } ]You can also use a function as the argument to map that does the same thing:
const mapAsArray = arr.map(function (value, key) {
return {key, value};
});
console.log(mapAsArray);
//This will output:
// { key: "1", value: "value1" },
//{ key: "2", value: "value2" },
//{ key: "3", value: "value3" } ]3. Using the forEach() Method
If you have a map, such as:
const myMap = new Map();
myMap.set("1", "value1");
myMap.set("2", "value2");
myMap.set("3", "value3");You can convert it to an array of objects using the forEach() method:
const arr = [];
myMap.forEach((value, key) => {
arr.push({key, value});
});
console.log(arr);
//This will output:
//{ key: "1", value: "value1" },
//{ key: "2", value: "value2" },
//{ key: "3", value: "value3" } ]This method iterates over each key/value pair in the map and calls the callback function for each. The callback function takes two arguments – value and key. In this callback function, we create an object with key and value properties and push it into the array.
Alternatively, you can use the for…of loop to achieve the same result:
const arr = [];
for ([key,value] of myMap) {
arr.push({key, value});
}
console.log(arr);
//This will output:
//{ key: "1", value: "value1" },
//{ key: "2", value: "value2" },
//{ key: "3", value: "value3" } ]This code does the same thing as the forEach() method – it iterates over each key/value pair in the map and creates an object with key and value properties which is pushed into the array.
As you can see, there are various ways to convert map values to an object in JavaScript. I hope this article was helpful. Thanks for reading!