JSON.stringify of object of map return empty

Question

    var map1= new Map();
    map1.set("one",1);
    var map2 = new Map();
    map2.set("two",2);
   concatMap = {};
   concatMap['one']= map1;
   concatMap['two']= map2;
 JSON.stringify(concatMap);

//outputs : "{"one":{},"two":{}}"

I also tried:

concatMap = {};
concatMap.one= map1;
concatMap.two= map2;

why am I getting the empty object instead of map 1 and map 2 when I use JSON.stringify()?

Answer 1

This is the expected result. JSON.stringify does not recognize a Map object as anything different than a regular object, and the JSON spec itself does not have a way to properly store a Map. It just treats the map as a regular object, possibly including any own object properties set on it.

var m = new Map();

// This is not included:
m.set('test', 123);

// This would be included:
m['other'] = 456;

console.log(JSON.stringify(m));

If you are just using string keys, you could use a regular object instead of a Map.

Answer 2

With credit to Tim Brown in his blog post on the subject - when the contents of the Map object are serialisable, you can do:

1. serialise Map to JSON:

   JSON.stringify(Array.from(map.entries()))

2. de-serialise JSON to Map:

   new Map(JSON.parse(jsonStr))