Convert Map to JavaScript object

Question

So Ive got the following javascript which contains a key/value pair to map a nested path to a directory.

function createPaths(aliases, propName, path) {
    aliases.set(propName, path);
}

map = new Map();

createPaths(map, 'paths.aliases.server.entry', 'src/test');
createPaths(map, 'paths.aliases.dist.entry', 'dist/test');

Now what I want to do is create a JSON object from the key in the map.

It has to be,

paths: {
  aliases: {
    server: {
      entry: 'src/test'
    },
    dist: {
      entry: 'dist/test'
    }
  }
}

Not sure if there is an out of a box way to do this. Any help is appreciated.

I'd substract key name from that string with dots and later build an object from what I gathered. — Nonemoticoner
– Nonemoticoner, Commented May 25, 2016 at 12:59
I hate it when people don't declare variables and end up with globals. Also, remember that 'It is a common mistake to call a JSON object literal "a JSON object". JSON cannot be an object. JSON is a string format.' (From W3Schools) — Capt 171
– Capt 171, Commented Oct 21, 2021 at 1:28

wolfram77 · Accepted Answer · 2020-09-12 17:54:01Z

206

Given in MDN, fromEntries() is available since Node v12:

const map1 = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(map1);
// { foo: 'bar', baz: 42 }

For converting object back to map:

const map2 = new Map(Object.entries(obj));
// Map(2) { 'foo' => 'bar', 'baz' => 42 }

edited Sep 12, 2020 at 17:54

answered Apr 5, 2019 at 14:15

wolfram77

3,2913 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ggorlen Over a year ago

Keep in mind that Map can hold non-string keys, so you'll get an undesirable result on, say, new Map([[{x: 0, y: 1}, 42]])

xgqfrms · Accepted Answer · 2024-05-18 02:12:53Z

just using ES6 ways

Object.fromEntries

const log = console.log;

const map = new Map();
// undefined
map.set(`a`, 1);
// Map(1) {"a" => 1}
map.set(`b`, 2);
// Map(1) {"a" => 1, "b" => 2}
map.set(`c`, 3);
// Map(2) {"a" => 1, "b" => 2, "c" => 3}

// Object.fromEntries ✅
const obj = Object.fromEntries(map);

log(`\nobj`, obj);
// obj { a: 1, b: 2, c: 3 }

...spread & destructuring assignment & for...of

const log = console.log;

const map = new Map();
// undefined
map.set(`a`, 1);
// Map(1) {"a" => 1}
map.set(`b`, 2);
// Map(1) {"a" => 1, "b" => 2}
map.set(`c`, 3);
// Map(2) {"a" => 1, "b" => 2, "c" => 3}

const autoConvertMapToObject = (map) => {
  const obj = {};
  for (const item of [...map]) {
    const [
      key,
      value
    ] = item;
    obj[key] = value;
  }
  return obj;
}

const obj = autoConvertMapToObject(map)

log(`\nobj`, obj);
// obj { a: 1, b: 2, c: 3 }

...spread & destructuring assignment & forEach

const log = console.log;

const map = new Map();
// undefined
map.set(`a`, 1);
// Map(1) {"a" => 1}
map.set(`b`, 2);
// Map(1) {"a" => 1, "b" => 2}
map.set(`c`, 3);
// Map(2) {"a" => 1, "b" => 2, "c" => 3}

const autoConvertMapToObject = (map) => {
  const obj = {};
  [...map].forEach(([key, value]) => (obj[key] = value));
  return obj;
}

const obj = autoConvertMapToObject(map)

log(`\nobj`, obj);
// obj { a: 1, b: 2, c: 3 }

refs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://2ality.com/2015/08/es6-map-json.html

Zachary Taylor · Accepted Answer · 2018-03-02 17:12:59Z

22

I hope this function is self-explanatory enough. This is what I used to do the job.

/*
 * Turn the map<String, Object> to an Object so it can be converted to JSON
 */
function mapToObj(inputMap) {
    let obj = {};

    inputMap.forEach(function(value, key){
        obj[key] = value
    });

    return obj;
}


JSON.stringify(returnedObject)

answered Mar 2, 2018 at 17:12

Zachary Taylor

2392 silver badges5 bronze badges

1 Comment

Tejashree Over a year ago

ES6 - implmentation: mapToObj(inputMap) { const obj = {}; inputMap.forEach((value, key) =>{ obj[key] = value; }); return obj; }

Nina Scholz · Accepted Answer · 2016-05-25 13:05:31Z

15

You could loop over the map and over the keys and assign the value

function createPaths(aliases, propName, path) {
    aliases.set(propName, path);
}

var map = new Map(),
    object = {};

createPaths(map, 'paths.aliases.server.entry', 'src/test');
createPaths(map, 'paths.aliases.dist.entry', 'dist/test');

map.forEach((value, key) => {
    var keys = key.split('.'),
        last = keys.pop();
    keys.reduce((r, a) => r[a] = r[a] || {}, object)[last] = value;
});

console.log(object);

answered May 25, 2016 at 13:05

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

evolutionxbox Over a year ago

Don't forget to add JSON.stringify(object)! (OP wants a JSON object...)

Nina Scholz Over a year ago

there is no JSON object, just a string which respects javascript-object-notation. stringify - i think - wasn't op's problem.

IMTheNachoMan · Accepted Answer · 2016-05-26 14:32:55Z

2

Another approach. I'd be curious which has better performance but jsPerf is down :(.

var obj = {};

function createPaths(map, path, value)
{
	if(typeof path === "string") path = path.split(".");
	
	if(path.length == 1)
	{
		map[path[0]] = value;
		return;
	}
	else
	{
		if(!(path[0] in map)) map[path[0]] = {};
		return createPaths(map[path[0]], path.slice(1), value);
	}
}

createPaths(obj, 'paths.aliases.server.entry', 'src/test');
createPaths(obj, 'paths.aliases.dist.entry', 'dist/test');

console.log(obj);

Without recursion:

var obj = {};

function createPaths(map, path, value)
{
    var map = map;
    var path = path.split(".");
    for(var i = 0, numPath = path.length - 1; i < numPath; ++i)
    {
        if(!(path[i] in map)) map[path[i]] = {};
        map = map[path[i]];
    }
    map[path[i]] = value;
}

createPaths(obj, 'paths.aliases.server.entry', 'src/test');
createPaths(obj, 'paths.aliases.dist.entry', 'dist/test');
createPaths(obj, 'paths.aliases.dist.dingo', 'dist/test');
createPaths(obj, 'paths.bingo.dist.entry', 'dist/test');

console.log(obj);

var obj = {};

function createPaths(map, path, value)
{
    var map = map;
    var path = path.split(".");
    
    while(path.length > 1)
    {
        map = map[path[0]] = map[path.shift()] || {};
    }
    
    map[path.shift()] = value;
  
}

createPaths(obj, 'paths.aliases.server.entry', 'src/test');
createPaths(obj, 'paths.aliases.dist.entry', 'dist/test');
createPaths(obj, 'paths.aliases.dist.dingo', 'dist/test');
createPaths(obj, 'paths.bingo.dist.entry', 'dist/test');

console.log(obj);

edited May 26, 2016 at 14:32

answered May 25, 2016 at 13:29

IMTheNachoMan

5,9336 gold badges61 silver badges116 bronze badges

5 Comments

evolutionxbox Over a year ago

jsPerf has been down for weeks.

evolutionxbox Over a year ago

In my console using console.time, your code took, on average, 0.023ms, whereas the accepted answer took, on average, 0.137ms.

RobG Over a year ago

@evolutionxbox—if the recursion was replaced with sequential code (perhaps needing a couple more lines of code) it would likely run faster again. Less code doesn't necessarily mean faster. :-)

evolutionxbox Over a year ago

@RobG very true. These were very crude performance tests. About 20 "runs" were performed on each.

IMTheNachoMan Over a year ago

@RobG: I know but recursion is so cool. :P I added an example without recursion.

subhash dhaka · Accepted Answer · 2022-10-11 13:10:31Z

1

var items = {1:"apple",2:"orange",3:"pineapple"};
let map = new Map(Object.entries(items)); //object to map
console.log(map);
const obj = new Object();
map.forEach((value,key)=> obj[key]=value);  // map to object
console.log(obj);

answered Oct 11, 2022 at 13:10

subhash dhaka

111 bronze badge

1 Comment

General Grievance Over a year ago

Both of these have been covered by existing answers already, I think?

Collectives™ on Stack Overflow

Convert Map to JavaScript object

6 Answers 6

1 Comment

just using ES6 ways

refs

Comments

1 Comment

2 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

just using ES6 ways

refs

Comments

1 Comment

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related