How to Convert an Array of Objects to a Map in JavaScript ?
An array of objects can contain multiple objects with the same properties i.e. key-value pairs. But a map does not contain duplicate values which means if you convert an array of objects with duplicate objects into a map, it will contain only the unique key-value pairs.
Example:
Input Array:
[
{ type: 'Company', name: 'w3wiki' },
{ type: 'Cricketer', name: 'Virat Kohli' },
{ type: 'Cricketer', name: 'Virat Kohli' }
]
Output Map: Map(2)
{
'Company' => 'w3wiki',
'Cricketer' => 'Virat Kohli'
}
The below approaches can be used to convert an array of objects to a map in JavaScript:
Table of Content
- Using the map() method
- Using the reduce() method
- Using the forEach() method
- Using the Object.enteries() method
- Using the for-of loop
- Using the findIndex() Method
Using the map() method
The Array.map() method of JavaScript can be used to iterate through each element of the array and then the set() method of JavaScript map can be used to set the properties of the JavaScript map.
Syntax:
arrayName.map((item)=>{ mapName.set()});
Example: The below example is the practical implementation of the map() method to convert an array of objects to a map.
const objectsArray =
[
{
type: "Company",
name: "w3wiki"
},
{
type: "Cricketer",
name: "Virat Kohli"
}
];
console.log("Array of objects is: ", objectsArray);
const createdMap = new Map();
objectsArray.map((obj) => {
createdMap.set(obj.type, obj.name);
});
console.log("Created Map: ", createdMap);
Output
Array of objects is: [
{ type: 'Company', name: 'w3wiki' },
{ type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map: Map(2) { 'Company' => 'w3wiki', 'Cricketer' => 'Virat Kohli' }...Using the reduce() method
The Array.reduce() method can be used to reduce an array of objects to a JavaScript map by passing the initial value as a empty map and setting the properties using the map set() method to the initial empty map.
Syntax:
arrayName.reduce((map, obj)=>{}, emptyMap);
Example: The below code uses the reduce() method to convert an array of objects to a JavaScript map.
const objectsArray =
[
{
type: "Company",
name: "w3wiki"
},
{
type: "Cricketer",
name: "Virat Kohli"
}
];
console.log
("Array of objects is: ", objectsArray);
const createdMap = new Map();
objectsArray.reduce((map, obj) => {
map.set(obj.type, obj.name);
return map;
}, createdMap);
console.log("Created Map: ", createdMap);
Output
Array of objects is: [
{ type: 'Company', name: 'w3wiki' },
{ type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map: Map(2) { 'Company' => 'w3wiki', 'Cricketer' => 'Virat Kohli' }...Using the forEach() method
The Array.forEach() method can be used to iterate through each element of the array in the similar way as the map() method was used.
Syntax:
arrayName.forEach((item)=>{ mapName.set()});
Example: This code is the practical implementation of the forEach() method to convert an array of object into a JavaScript map.
const objectsArray =
[
{
type: "Company",
name: "w3wiki"
},
{
type: "Cricketer",
name: "Virat Kohli"
}
];
console.log
("Array of objects is: ", objectsArray);
const createdMap = new Map();
objectsArray.forEach((obj) => {
createdMap.set(obj.type, obj.name);
});
console.log("Created Map: ", createdMap);
Output
Array of objects is: [
{ type: 'Company', name: 'w3wiki' },
{ type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map: Map(2) { 'Company' => 'w3wiki', 'Cricketer' => 'Virat Kohli' }...Using the Object.enteries() method
The Object.enteries() method here can be used to convert the key-value pairs of the objects into the arrays of keys and values which can be iterated later and converted to an map using the map() method.
Syntax:
Object.enteries(arrayName).map([key, value]) => {});
Example: The below code implements the Object.enteries() method to convert an array of objects into a map.
const objectsArray =
[
{
type: "Company",
name: "w3wiki"
}
];
console.log("Array of objects is: ", objectsArray);
const createdMap =
new Map(Object.entries
(objectsArray).map(([key, value]) => [key, value]));
console.log("Created Map: ", createdMap);
Output
Array of objects is: [ { type: 'Company', name: 'w3wiki' } ]
Created Map: Map(1) { '0' => { type: 'Company', name: 'w3wiki' } }
Using the for-of loop
The for/of loop can be used to iterate through the object items of the array and then they can be set as the properties of the map using the map set() method.
Syntax:
for(const obj of arrayName){}
Example: The below code explains the use of the for/of loop to convert a array of objects into a map.
const objectsArray =
[
{
type: "Company",
name: "w3wiki"
},
{
type: "Cricketer",
name: "Virat Kohli"
}
];
console.log("Array of objects is: ", objectsArray);
const createdMap = new Map();
for (const obj of objectsArray) {
createdMap.set(obj.type, obj.name);
}
console.log("Created Map: ", createdMap);
Output
Array of objects is: [
{ type: 'Company', name: 'w3wiki' },
{ type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map: Map(2) { 'Company' => 'w3wiki', 'Cricketer' => 'Virat Kohli' }...Using the findIndex() Method
The findIndex() method can be used to ensure that duplicate keys are not added to the map, thereby maintaining only unique key-value pairs.
Example:
const objectsArray = [
{ type: "Company", name: "w3wiki" },
{ type: "Cricketer", name: "Virat Kohli" },
{ type: "Cricketer", name: "Virat Kohli" } // Duplicate entry
];
console.log("Array of objects is: ", objectsArray);
const createdMap = new Map();
objectsArray.forEach(obj => {
// Check if the key is already in the map
if (Array.from(createdMap.keys()).findIndex(key => key === obj.type) === -1) {
createdMap.set(obj.type, obj.name);
}
});
console.log("Created Map: ", createdMap);
// Nikunj Sonigara
Output
Array of objects is: [
{ type: 'Company', name: 'w3wiki' },
{ type: 'Cricketer', name: 'Virat Kohli' },
{ type: 'Cricketer', name: 'Virat Kohli' }
]
Created Map: Map(2) { 'Company' => '...
Contact Us