IT二刀流にはプロモーションが含まれています。

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

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に変換することはできません。

そのうち対応されてできるようになるかもしれません。

それまでは、他の型に変換して対応しましょう。

ITエンジニアの転職

いまITエンジニアの需要は急拡大しています。
ITエンジニアの経験があれば好条件で転職することも難しくありません。

マイナビクリエイター

☆ 支援ご協力のお願い ☆

この記事が「役に立った」と感じたら

投げ銭の「OFUSEで応援」で支援して頂けたら励みになります!

OFUSEのやり方(説明)

関連記事
記事特集