javascript JSON.stringifyでSetを使用する
- 作成日 2022.11.27
- javascript
- javascript
javascriptで、JSON.stringifyで「Set」を使用するサンプルコードを記述してます。「JSON.stringify」で「Set」は仕様で空のオブジェクトが返ります。使用するコールバック関数を使って「Set」を配列などに変換してから使用します。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 107.0.5304.107
JSON.stringifyでSetを使用
「JSON.stringify」で「Set」を使用すると、以下のように空のオブジェクトが返ります。
const obj = { a: new Set([1, 2, 3]) };
let result = JSON.stringify(obj);
console.log(result); // {"a":{}}
これを使用できるようにするには、
1. 「JSON.stringify」にコールバック関数を使用
2. コールバック関数内で「Set」だった場合はスプレッド構文などで配列に変換する
ことで可能です。
const obj = { a: new Set([1, 2, 3]), b: 1, c: 'a' };
let result = JSON.stringify(obj, (k, v) => {
return (v instanceof Set) ? [...v] : v
}
);
console.log(result); // {"a":[1,2,3],"b":1,"c":"a"}
サンプルコード
以下は、
「実行」ボタンをクリックすると、用意したSetが含まれるオブジェクトを「JSON.stringify」でJSON形式の文字列に変換して表示する
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container text-center w-75 mx-auto" style="margin-top:200px">
<h2><span class="badge badge-info">結果</span></h2>
<button type="button" onclick="changeObj()" class="btn btn-raised btn-info">
実行
</button>
</div>
<script>
// Mapが含まれたオブジェクトを用意
let obj = { a: new Map([[1, "a"], [2, "b"]]), b: 111, c: 'aaa' };
const changeObj = () => {
// 表示用要素取得
let elm = document.getElementsByClassName("badge")[0];
// JSON 文字列に変換して結果を表示
elm.textContent = JSON.stringify(obj, (k, v) => { return (v instanceof Map) ? Object.fromEntries(v) : v });
}
</script>
</body>
</html>
変換されて表示されていることが確認できます。
-
前の記事
CentOS9 lsコマンドの代わりに使える「exa」をインストールする 2022.11.26
-
次の記事
ubuntu nautilusでサイドバーの表示・非表示を切り替えるショートカットキー 2022.11.27
コメントを書く