convert Typescript Map to json string representation

Question

I've got a Map<string, string> variable in typescript:

let m = Map<string, string>().set('tag', 'v1');

I want to convert to json string representation:

'{"tag": "v1"}'

I've tried 3 different ways. First is to use m.toString(). Second is using JSON.stringify(m). Both returned {}. I've even tried to convert the Map to a javascript object first and then convert to string:

function MapToString(map): string {
  let ro = {};
  Object.keys(map).forEach( key => {
    ro[key] = map[key];
  });
  return JSON.stringify(ro);
}

s = MapToString(m);

This returned {} as well when I tried to print it in the console.

Object.fromEntries(mapObject); is available in node 12 onwards https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries — Pankaj Chimbalkar, Feb 19 '20 at 13:28
Does this answer your question? [Convert Map to JSON object in Javascript](https://stackoverflow.com/questions/37437805/convert-map-to-json-object-in-javascript) — Pankaj Chimbalkar, Feb 19 '20 at 13:30

score 13 · Accepted Answer · answered Sep 06 '17 at 15:19

13

I eventually gave up on using es6 Map and switched to TSMap, on which tags.toJSON() works.

answered Sep 06 '17 at 15:19

breezymri

3,975
8
31
65

Lostfields · Answer 2 · 2017-09-07T08:36:18.057

11

Readable? No, but it works

JSON.stringify(
  Array.from(
    new Map().set('tag', 'v1').set('foo', 'bar').entries()
  )
  .reduce((o, [key, value]) => { 
    o[key] = value; 

    return o; 
  }, {})
)

Like @james-hay pointed out, you have a typo that probably makes the object empty

edited Sep 07 '17 at 08:36

answered Sep 06 '17 at 05:40

Lostfields

1,364
1
12
20

2

With `[key, val]` instead of the parameter `e` it would be more readable IMO. :-) – Paleo Sep 06 '17 at 08:22
yeah, I usually forget that nice new destructuring assignment :-) Thanks. – Lostfields Sep 07 '17 at 08:35
Doesn't do *deep* toString, tho. – barfuin Jul 24 '19 at 19:48

Robert Jack Will · Answer 3 · 2019-07-29T15:37:45.680

Although it does not directly answer your question: when I had the same problem, I reconsidered my use of Map and went for plain JavaScript objects. Since JSON always needs strings as keys, one of Map's main advantages (keys of any type) are lost anyway.

Another advantage of Map is that they allow a nice type signature, like Map<String, Array<String>>. But here TypeScript's "index signatures" provide exactly this for plain JavaScript objects and even allow a name for keys:

interface CityLists {
    [postcode: string]: Array<string>
};

This can be used almost like a Map (with different syntax, of course) and it directly converts to JSON even when nested. I think the latter is quite important when you convert an object tree to JSON where maps can be nested somewhere deep down in other arbitrary objects and arrays.

Alternatively, TypeScript also has the type Record<K, T> for this use-case: a plain object used as a typed map. In the above example, I could write:

let cityLists: Record<string, Array<string>>;
cityLists["capitals"] = ["Rome", "Paris", "Berlin"];

score 4 · Answer 4 · answered Feb 22 '23 at 18:39

4

Surprised this wasn't mentioned yet:

let m = new Map().set('tag', 'v1').set('foo', 'bar')

JSON.stringify(Object.fromEntries(m))

Seems to me the most readable solution.

answered Feb 22 '23 at 18:39

Spenhouet

6,556
12
51
76

score 0 · Answer 5 · answered Aug 11 '20 at 13:20

0

In Nativescript with lib es2015 I can do:

From Object to string:

// no need to import JSON
let fooInString = JSON.stringify(this.mapObject.subMap);

From string to Object:

// no need to import JSON
let fooInObject = JSON.parse(fooInString);

Happy Coding!

answered Aug 11 '20 at 13:20

moralejaSinCuentoNiProverbio

809
1
19
25

score -1 · Answer 6 · answered Nov 18 '20 at 08:48

While this seems to be a typo as indicated in other answers, this problem can occur when ES6 and vanilla JS are used together in the same project. JS won't recognise the ES6 map and convert it to an empty object "{}".

A quick workaround is to use a serialiser/deserialiser whenever persisting ES6 maps in a JS object

ES6 to JS

convertTSMapToJSObj(tsMap) {
    const jsObj = {};
    tsMap.forEach(function (value, key) {
        jsObj[key] = value;
    });
    return jsObj;
}

JS to ES6

convertJSObjToTSMap(jsObj) {
    const tsMap = new Map();
    const arrayOfMapEntries = new Map<any, any>(Object.entries(jsObj);
    for (const [key, value] of arrayOfMapEntries.entries()) {
        tsMap.set(key, value);
    }
    return tsMap;
}

convert Typescript Map to json string representation

6 Answers6

Linked