Monday, February 24, 2020

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));

Related article


EmoticonEmoticon