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

Yii2 pjax not refreshing properly when updating records in the gridview

The logout feature might refresh the page, yet the user remains logged in

Issue Loading Bodies with Box2D and LibGDX: BodyEditorLoader Problem

Determine whether there is only one array in the object that contains values

AngularJS and Gulp: Enhancing Static Assets with Revisioning

Issue: EACCES error encountered while attempting to execute bower install operation

Reading a JSON object from a SQL database and transforming it into a Java class: A step-by-step guide

Creating enduring designs in Next.js

Object displaying no visible illumination

Issue with CSS: Dropdown menu is hidden behind carousel while hovering

Puppeteer and Chromium are ready to go with no need for any configuration

Guide to developing a personalized useReducer with integrated decision-making and event activation

Choosing Tags with Ajax in Select2

efficiency of a process during ng-repeat execution

Turn off the validation of individual JavaScript errors in Eclipse

Tips for integrating Tornado authentication with AngularJS

Unable to read a QR code from a blob link

How to create a fresh factory instance in Angular Js

The navigation buttons on the Bootstrap carousel will only respond to keyboard commands after the arrow on the

The value returned by a component should remain consistent regardless of where it is invoked. Additionally, the main component in React should not re-render when the state of a sub-component is