JavaScriptのMapオブジェクトはJSONに変換できない

JavaScriptのMapオブジェクトはJSONに変換できないです。

代替え案を記載しています。

JSONでデータ送信
配列のArray()変換して送る
オブジェクトObject()に変換
まとめ

JSONでデータ送信

最近はフロント側をReactやAngularなどで構築して、データをJSONでサーバ側に送る方法も多いですよね。

しかし、JavaScriptのMapオブジェクトはJSONに変換することはできません。

// Mapオブジェクトを作成
const mapData = new Map();
mapData.set(0, { id: 1, name: '1st', age: 10 });
mapData.set(1, { id: 2, name: '2nd', age: 20 });
mapData.set(2, { id: 3, name: '3rd', age: 30 });

console.log('=== Map() ===');
console.log(mapData);
console.log(JSON.stringify(mapData)); // JSONに変換

// OUTPUT:
// === Map() ===
// Map(3) {
//   0 => { id: 1, name: '1st', age: 10 },
//   1 => { id: 2, name: '2nd', age: 20 },
//   2 => { id: 3, name: '3rd', age: 30 }
// }
// {}

JSON.stringify()で変換すると空{}になります。

なんてことでしょう、JSON.stringify()でJSONに変換してサーバ側に送ることができないのです。

理由はJSONの仕様にMapオブジェクトが無いからです、JSON側で想定していない形なので変換できないのです。

どうすればいいのでしょうか。

配列のArray()変換して送る

JSONに変換できるArray()に変換しましょう。

// Mapオブジェクトを作成
const mapData = new Map();
mapData.set(0, { id: 1, name: '1st', age: 10 });
mapData.set(1, { id: 2, name: '2nd', age: 20 });
mapData.set(2, { id: 3, name: '3rd', age: 30 });

// Arrayに変換
const arr = new Array();
mapData.forEach( v => arr.push(v) );
console.log('=== Array() ===');
console.log(arr);
console.log(JSON.stringify(arr)); // JSONに変換

// OUTPUT:
// === Array() ===
// [
//   { id: 1, name: '1st', age: 10 },
//   { id: 2, name: '2nd', age: 20 },
//   { id: 3, name: '3rd', age: 30 }
// ]
// [{"id":1,"name":"1st","age":10},{"id":2,"name":"2nd","age":20},{"id":3,"name":"3rd","age":30}]

これならJSONに変換してサーバに送信することができます。

サーバ側でループ処理すれば問題は無いはずです。

オブジェクトObject()に変換

いや、Mapオブジェクトのkeyも欲しいのですが・・・

なんて我儘なあなたはObject()に変換しましょう。

// Mapオブジェクトを作成
const mapData = new Map();
mapData.set(0, { id: 1, name: '1st', age: 10 });
mapData.set(1, { id: 2, name: '2nd', age: 20 });
mapData.set(2, { id: 3, name: '3rd', age: 30 });

// Objectに変換
const obj = new Object();
mapData.forEach( (v, k) => obj[k] = v );
console.log('=== Object() ===');
console.log(obj);
console.log(JSON.stringify(obj)); // JSONに変換

// OUTPUT:
// === Object() ===
// {
//   '0': { id: 1, name: '1st', age: 10 },
//   '1': { id: 2, name: '2nd', age: 20 },
//   '2': { id: 3, name: '3rd', age: 30 }
// }
// {"0":{"id":1,"name":"1st","age":10},"1":{"id":2,"name":"2nd","age":20},"2":{"id":3,"name":"3rd","age":30}}

これでサーバに送信できます。