How to Convert an Array of Objects to a Map in JavaScript

How to Convert an Array of Objects to a Map in JavaScript?

by

Converting an Array of Objects to a Map in JavaScript

To Convert an Array of Objects to a Map in JavaScript we use the following 2 methods:

Method #1: Using map() method and Map() constructor

Call the map() method on an array to convert the array of objects to a Map, and on each iteration return an array containing the key and value.

Then, to create the Map object, pass the array of key-value pairs to the Map() constructor.

Example1:

//create a array of objects and store it in a variable
const gvn_arry = [
   // create a object with fields key and value and give some random values
  {key: 'EmpName', value: 'Nick'},
  {key: 'EmpId', value: 5412},
];
// Using map to iterate through the array of objects and storing this result in a variable
const fst_map = new Map(
    // Returning the object values of each value inside the array using the map() and return 
  gvn_arry.map(object => {
    return [object.key, object.value];
  }),
);

console.log(fst_map);

Output:

Map { 'EmpName' => 'Nick', 'EmpId' => 5412 }
  • The function that we passed to the gvn_arry.map() method gets called with each element in the array.
  • We return an array containing the object’s key and value after each iteration.
  • The array of key-value pairs is returned by the map method.

Example2:

//create a array of objects and store it in a variable
const gvn_arry = [
   // create a object with fields key and value and give some random values
  {key: 'EmpName', value: 'Nick'},
  {key: 'EmpId', value: 5412},
];
//Printing the values directly using the console.log()
console.log(
    // Returning the object values of each value inside the array using the map() and return 
  gvn_arry.map(object => {
    return [object.key, object.value];
  }),
);

Output:

[ [ 'EmpName', 'Nick' ], [ 'EmpId', 5412 ] ]

The result is then passed to the Map() constructor as the final step.

The Map() constructor accepts an iterable object as a parameter and creates a new Map object. It should be noted that the iterable must include key-value pairs.

Another option is to use the Array.forEach method.

Method #2: Using Array.forEach() Method

To convert an array of objects to a Map, do the following:

  • To create a new Map, use the Map() constructor.
  • Call the forEach() method on an array.
  • Add the key-value pair to the new Map on each iteration.

Example:

//create a array of objects and store it in a variable
const gvn_arry = [
   // create a object with fields key and value and give some random values
  {key: 'EmpName', value: 'Nick'},
  {key: 'EmpId', value: 5412},
];
//create a new map object using the Map() function
const map_2 = new Map();
// Iterate through the array using the forEach() function
gvn_arry.forEach(object => {
    //add the key and value of the object to the map using the set() function
  map_2.set(object.key, object.value);
});
//printing the map value
console.log(map_2);

Output:

Map { 'EmpName' => 'Nick', 'EmpId' => 5412 }

Explanation:

  • The function that we passed to the forEach() method gets called with each element in the array.
  • Because the forEach method returns undefined, we must declare a variable to store the state of the iterations.
  • We use the Map.set() method to add a key-value pair to the Map on each iteration.
  • The Map will include all key-value pairs from the object after the last iteration.