Convert Map to JSON in JavaScript

A JavaScript Map stores key-value pairs in insertion order and supports keys of any data type, including objects and functions. Converting a Map to JSON is useful for data exchange, API requests, and storage.

• Preserves Key-Value Data: A Map stores related keys and values while maintaining insertion order.
• Supports JSON Conversion: Since JSON.stringify() does not directly serialize a Map's entries, convert it into a plain object or an array before serialization.
• Enables Data Exchange: JSON conversion makes Map data easier to send to APIs or store in JSON-compatible formats.

Example:

const myMap = new Map([
  ["name", "Lucas"],
  ["age", 21],
  ["city", "New York"]
]);

console.log(myMap.get("name"));

Lucas

Methods to Convert a Map to JSON

1. Using Object.fromEntries() and JSON.stringify()

The Object.fromEntries() method converts a Map into a plain object, which can then be serialized using JSON.stringify().

const myMap = new Map([
  ["name", "Nicol"],
  ["age", 21],
  ["city", "New York"]
]);

const jsonString = JSON.stringify(Object.fromEntries(myMap));

console.log(jsonString);

{"name":"Nicol","age":21,"city":"New York"}

This approach is concise and works well when the map's keys can be represented as object property names. Non-string keys are converted to property keys, so distinct map keys can potentially collide during conversion.

2. Using Iterative Conversion

You can iterate over a Map using forEach() and copy its entries into a plain object before converting it to JSON.

const myMap = new Map([
  ["name", "Nicol"],
  ["age", 21],
  ["city", "New York"]
]);

const jsonObj = {};

myMap.forEach((value, key) => {
  jsonObj[key] = value;
});

const jsonString = JSON.stringify(jsonObj);

console.log(jsonString);

{"name":"Nicol","age":21,"city":"New York"}

This method is useful when you need to transform or validate entries during conversion. Like Object.fromEntries(), it converts map keys into object property names and is not suitable for preserving arbitrary key types.

3. Using Array.from() and JSON.stringify()

If you need to preserve the map's key-value pairs without converting keys into object property names, serialize the map as an array of entries.

const myMap = new Map([
  ["name", "Nicol"],
  ["age", 21],
  ["city", "New York"]
]);

const jsonString = JSON.stringify(Array.from(myMap));

console.log(jsonString);

[["name","Nicol"],["age",21],["city","New York"]]

This approach preserves the entry structure and supports non-string keys when their values are JSON-serializable. However, JSON serialization still cannot preserve every JavaScript value or object identity.

To convert the JSON string back into a Map, parse the entries and pass them to the Map constructor:

const parsedEntries = JSON.parse(jsonString);
const restoredMap = new Map(parsedEntries);

console.log(restoredMap.get("name"));

Use Cases and Considerations

• Nested data: Ensure nested values are compatible with JSON serialization.
• Key preservation: Use an array of entries when converting keys to object property names could cause collisions or loss of meaning.
• Data exchange: Choose an object or array representation that matches the format expected by the receiving application.
• Compatibility: Map, Object.fromEntries(), and JSON.stringify() are supported in modern JavaScript environments.