When using JSON.stringify on a map object, it returns an empty result

Question

When using JSON.stringify on a map object, it returns an empty result

    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 attempted the following:

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

Why do I receive empty objects instead of map1 and map2 when using JSON.stringify()?

javascript json

Answer 1

Answer №1

The desired outcome is as follows: JSON.stringify does not interpret a Map object any differently than a standard object, and the JSON specification itself lacks a mechanism to accurately store a Map. Instead, it treats the map as a regular object and may include any custom object properties set on it.

var m = new Map();

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

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

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

If you only use string keys, consider using a plain object rather than a Map.

Answer 2

The desired outcome is as follows: JSON.stringify does not interpret a Map object any differently than a standard object, and the JSON specification itself lacks a mechanism to accurately store a Map. Instead, it treats the map as a regular object and may include any custom object properties set on it.

var m = new Map();

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

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

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

If you only use string keys, consider using a plain object rather than a Map.

Answer 3

Answer №2

Simple solution :

In the scenario where you create a Map like this:

const map = new Map();

and populate it with values using:

map.set('key', 'value');

Calling JSON.stringify on the map will result in an empty object being displayed.

To rectify this issue, you can use the following approach:

const objFromMap = Object.fromEntries(map);
JSON.stringify(objFromMap);

Dealing with complex objects :

If your object contains a field that is a map, for instance:

class MyClazz {
   field = new Map();
}
const instance = new MyClazz();
instance.field.set('k', 'v');

When using JSON.stringify, the output will be:

{field: {}}

To resolve this, you need to override the toJSON method as shown below:

class MyClazz {
   field = new Map();
   toJSON(): this {
      return {
          field: Object.fromEntries(this.field),
      }
   }
}
const instance = new MyClazz();
instance.field.set('k', 'v');

After implementing this change, calling JSON.stringify(instance); will give the desired output:

{field: {k: 'v'}}

Answer 4

Simple solution :

In the scenario where you create a Map like this:

const map = new Map();

and populate it with values using:

map.set('key', 'value');

Calling JSON.stringify on the map will result in an empty object being displayed.

To rectify this issue, you can use the following approach:

const objFromMap = Object.fromEntries(map);
JSON.stringify(objFromMap);

Dealing with complex objects :

If your object contains a field that is a map, for instance:

class MyClazz {
   field = new Map();
}
const instance = new MyClazz();
instance.field.set('k', 'v');

When using JSON.stringify, the output will be:

{field: {}}

To resolve this, you need to override the toJSON method as shown below:

class MyClazz {
   field = new Map();
   toJSON(): this {
      return {
          field: Object.fromEntries(this.field),
      }
   }
}
const instance = new MyClazz();
instance.field.set('k', 'v');

After implementing this change, calling JSON.stringify(instance); will give the desired output:

{field: {k: 'v'}}

Answer 5

Answer №3

Credit goes to Tim Brown for sharing a helpful tip in his blog post. He suggests that when the data within a Map object is serializable, you can follow these steps:

Convert Map to JSON:

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

Convert JSON back to Map:

new Map(JSON.parse(jsonStr))

Answer 6

Credit goes to Tim Brown for sharing a helpful tip in his blog post. He suggests that when the data within a Map object is serializable, you can follow these steps:

Convert Map to JSON:

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

Convert JSON back to Map:

new Map(JSON.parse(jsonStr))

Answer 7

Answer №4

It has been pointed out by others that Maps are not currently supported by JSON. However, 2D arrays can be used instead:

const map1 = new Map().set("one", 1),
           map2 = new Map().set("two", 2),
           concatMap = {
              one: [...map1],
              two: [...map2]
           };

const result = JSON.stringify(concatMap);

To decode this information, you can use the following:

 let {one, two} = JSON.parse(result);
 one = new Map(one),
 two = new Map(two);

Answer 8

It has been pointed out by others that Maps are not currently supported by JSON. However, 2D arrays can be used instead:

const map1 = new Map().set("one", 1),
           map2 = new Map().set("two", 2),
           concatMap = {
              one: [...map1],
              two: [...map2]
           };

const result = JSON.stringify(concatMap);

To decode this information, you can use the following:

 let {one, two} = JSON.parse(result);
 one = new Map(one),
 two = new Map(two);

Answer 9

Answer №5

Utilize the following code snippet to create a new Map:

const newMap = JSON.parse('{}');
newMap[name] = value;

After assigning values, remember to stringify the newMap. The end result will be parsed as a Map<string, string>

Answer 10

Utilize the following code snippet to create a new Map:

const newMap = JSON.parse('{}');
newMap[name] = value;

After assigning values, remember to stringify the newMap. The end result will be parsed as a Map<string, string>

Answer 11

Answer №6

Instead of using a map object, you have the option to utilize map1 = {"one", 1}.

To see this in action, check out this functional plunker: https://plnkr.co/edit/sXGvkLoWcJ2mjeNAH4z3?p=preview

Answer 12

Instead of using a map object, you have the option to utilize map1 = {"one", 1}.

To see this in action, check out this functional plunker: https://plnkr.co/edit/sXGvkLoWcJ2mjeNAH4z3?p=preview

When using JSON.stringify on a map object, it returns an empty result

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Angular: Designing personalized hyperlink overlays for text content with a filter

What exactly is the functionality of the third parameter (usually next()) behind the scenes in ExpressJS once it is hidden behind the abstraction layer?

Creating an array of objects in Javascript by setting two different values as a range

Tips for setting up listeners across multiple modules using socket.io

Most effective method for structuring a JSON format that contains recurring keys for every item within its array

Using AJAX to Send Requests to PHP

Encountered an error while attempting to load resource: the server returned a 404 (Not Found) status code when trying to load an image in an

Understanding how to efficiently map through FontAwesome icons using React TypeScript and effectively showcase them on the frontend

Exporting SQLite tables from Android to a JSON file

What is the best way to retrieve recently inserted data using Sequelize in PostgreSql?

The error message "TypeError: (0, _style.default) is not a function" occurred when using jest along with material

When the dependency value transitions from 1 to 0, useEffect fails to trigger

JavaScript's version of "a certain phrase within a text"

Using JavaScript to submit the value of a checkbox

Implementing a constant loop repeatedly in NextJs

Searching for several arrays in Angular

Utilizing jQuery with variable assignment: A beginner's guide

Include new item in current JSON data using Java

Building connections in parse.com using various classes (JavaScript SDK)

Generating a new array and merging different sets of keys together