JavaScriptのMapオブジェクトはJSONに変換できないです。
代替え案を記載しています。
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}}
これでサーバに送信できます。
まとめ
現状ではMap()オブジェクトをそのままJSONに変換することはできません。
そのうち対応されてできるようになるかもしれません。
それまでは、他の型に変換して対応しましょう。