Javascript - Different ways to convert Object to Map

Javascript - Different ways to convert Object to Map

Learn How to convert an object to Map with examples in javascript.

How to Convert Plain object to map in javascript

During development, Every developer faces the issue ere the object of data wants to convert to Map.

Object and Map are separate data types in javascript.

An object is a group of items with each item containing keys and values separated by commas enclosed in parenthesis.

The map is a separate data structure used to store key and value pairs using hashing.

The example shows how we can create an object in javascript

object declaration and creation in javascript:

let objData = { id: 1, name: "cloudhadoop" };

The map is a separate data structure introduced in ES6 with key and value pairs. the map can be created with the Map keyword. Following is an example for creating inline map creation and assigning with data.

var mapData = new Map([
  ["1", "cloudhadoop"],
  ["2", "name2"],
]);

Both are separate types of data in JavaScript. Conversion of Object to map is not automatic. We have to write a code to handle this.

Examples for conversion

There are many ways we can convert the object to a map. Following example using object keys and map keywords.

  • Inline object is created
  • Created Map object using new operator
  • A retrieved array of objects properties using object keys and iterated array of properties
  • passed the data from the above step as a map
let objData = { id: 1, name: "cloudhadoop" };
let map = new Map();
map = Object.keys(objData).map((key) => [key, objData[key]]);
console.log(JSON.stringify(map));

using the object. entries in Map constructor in ES6

Es6 Map has a constructor which accepts the result of the object. entries method.

let objData = { id: 1, name: "cloudhadoop" };
const map = new Map(Object.entries(obj));
console.log(JSON.stringify(map));

Output is

[
  ["id", 1],
  ["name", "cloudhadoop"],
];

Using Jquery each function

each function in jquery is to iterate the values of an object which accepts an object and a callback function will be executed for each entry of an object.

let objData = { id: 1, name: "cloudhadoop" };
const mymap = new Map();
$.each(objData, function (key, value) {
  mymap[key] = value;
});
console.log(JSON.stringify(mymap));

lodash with toPairs function

Lodash is a popular library for utility functions. toPairs function accepts an object of string properties which returns a map or set, the output of toPairs method is passed, and Map constructor

const _ = require("lodash");
let objData = { id: 1, name: "cloudhadoop" };
const newmap = new Map(_.toPairs(objData));
console.log(JSON.stringify(newmap));

How to convert an array of objects to Map in javascript

an array of objects are enclosed in a square bracket -[ array of objects] Many ways we can convert array objects to maps.

ES6 map constructor with the Array map method

Array objects are iterated using the array map() method with call back. map method calls for every object and finally returns a new map object which is passed to the Map constructor

var arrayData = [
  { id: "1", name: "kiran" },
  { id: "2", name: "Franc" },
];
var mymap = new Map(arrayData.map((entry) => [entry.id, entry.name]));
console.log(JSON.stringify(mymap));

Output is

[
  ["1", "kiran"],
  ["2", "Franc"],
];

using lodash fromPairs function

fromPairs function in lodash accepts map which is a result of array map entries

var arrayData = [
  { id: "1", name: "kiran" },
  { id: "2", name: "Franc" },
];
const map = _.fromPairs(arrayData.map((object) => [object.id, object.name]));
console.log(JSON.stringify(mymap));

Conclusion

To sum up, We have learned different ways to convert the object to a map in javascript.