Javascript - Different ways to convert Object to Map with ES6 examples


In this blog post, We are going to learn object to Map with examples in java script and Map.

Convert Plain object to map in javascript

During development, Every developer facing the issue where object of data wants to convert to Map.Object and Map are separate data types in java script.

Object is group of items with each item contains key and values separated by comma enclosed in parenthesis.
The example shows how we can create a object in java script

object declaration and creation in java script

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

Map is separate datastructure introduced in ES6 with and key and value pairs. map can be created with Map keyword.
Following is an example for creating inline map creation and assign 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 object to map.
Following example using object keys and map  keywords

  • Inline object is created 
  • Created Map object using new operator
  • Retrieved array of objects properties using object keys and iterated array of properties 
  • passed the data from above step as 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 object.entries in Map constructor in ES6 

 Es6 Map has a constructor which accepts result of 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 object and callback function callback function will be executed for each entries 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 popular library for utility functions.  toPairs function accepts object of string properties which returns map or set, output of toPairs method is passed Map constructor

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

Convert array of objects to Map in javascript

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

ES6 map constructor with Array map method. 

Array objects are iterated using array map() method with call back. map method calls for every objects, finally returns new map object which is passed to 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));  

Similar Posts