オブジェクトをJSONに変換する - JavaScript

概要

オブジェクトをJSON形式の文字列に変換するには、JSON.stringify() メソッドを利用します。

書式

JSON.stringify([変換するオブジェクト])
または
JSON.stringify([変換するオブジェクト], [変換関数])
JSON.stringify([変換するオブジェクト], [変換関数], [空白処理方法])

プログラム

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    var obj = {
      name: "ぺんぎんクッキー",
      code: "PC-001",
      price: 360,
      getInfo: function () {
        return this.name + " = \\" + this.price;
      }
    }

    function ObjectToJson() {
      var jsontext = JSON.stringify(obj);
      var elem = document.getElementById("textarea1");
      elem.innerText = jsontext;
    }
  </script>
</head>
<body>
  <div></div>
  <div><textarea id="textarea1" cols=80 rows=20 wrap="off"></textarea></div>
</body>
</html>

解説

下記コードでオブジェクトを定義します。
    var obj = {
      name: "ぺんぎんクッキー",
      code: "PC-001",
      price: 360,
      getInfo: function () {
        return this.name + " = \\" + this.price;
      }
    }

ボタンがクリックされると下記のObjectToJson() 関数が呼び出されます。 JSON.stringify() メソッドの呼び出しによりオブジェクトをJSONの文字列に変換します。変換するオブジェクトを第一引数に与えます。
変換した結果はJSON.stringify()の戻り値として返ります。今回のコードでは、結果のJSON形式の文字列をテキストエリアに表示します。
    function ObjectToJson() {
      var jsontext = JSON.stringify(obj);
      var elem = document.getElementById("textarea1");
      elem.innerText = jsontext;
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のウィンドウが表示されます。


[Button]ボタンをクリックします。JavaScriptのオブジェクトの情報がJSONの文字列に変換されテキストエリアに文字列として表示されます。


著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2017-04-27
iPentec all rights reserverd.