javascript JSON.stringifyでSetを使用する

javascript JSON.stringifyでSetを使用する

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>

変換されて表示されていることが確認できます。