HTMLファイル中にJSONを記述して値を取得する

HTMLファイル中にJSONを記述して値を取得するコードを紹介します。

概要

HTMLファイル中にJSONでデータとなる情報を記述してJavaScriptでアクセスするコードを紹介します。

HTML中にJSONデータを記述する方式を採用するシナリオ

HTML中にJSONデータを記述する今回の例では、固定値の値をHTMLに記述しているため、実際のアプリケーションでは有用ではないように見えますが、サーバー側のプログラム(Webアプリ、CGI)でHTMLを出力する場合は、プログラム側で動的にHTMLを出力できるため、JSONに出力する値も動的に変更できます。

ページアクセス時のURLやURLパラメーター、Cookieの値といったページアクセス時の情報で、ページのJavaScriptに渡したい値が決定できる場合はサーバー側プログラムで、 JSONのデータをHTMLに含めて出力すると、サーバープログラムからJavaScriptに値を渡す処理が実装できます。

プログラム:単純な例

コード

以下のHTMLファイルを作成します。

JsonObjectInHtml.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript">
    function onButtonClick() {
      
      var data = [
        { "name": "ぺんぎんクッキー", "price": 250 },
        { "name": "らくだキャラメル", "price": 80 },
        { "name": "かるがもサブレ", "price": 160 }
      ];
      
      for (var i = 0; i < 3; i++) {
        var PrdBox = "Product[" + i + "]";
        var PriceBox = "Price[" + i + "]";
        var PrdElem = document.getElementById(PrdBox);
        var PriceElem = document.getElementById(PriceBox);

        if (i < data.length) {
          PrdElem.value = data[i].name;
          PriceElem.value = String(data[i].price);
        }
      }
    }
  </script>
</head>
<body>
  <h2>HTMLファイル中のJSONから値を取得する</h2>
  <input type="button" onclick="onButtonClick();" value="Exec"/>
  <hr/>
  <div class="FieldFrame">
    <div class="Field">品名</div>
    <div class="Field"><input type="text" id="Product[0]"/></div>
    <div class="Field">価格</div>
    <div class="Field"><input type="text" id="Price[0]" /></div>
  </div>
  <div class="FieldFrame">
    <div class="Field">品名</div>
    <div class="Field"><input type="text" id="Product[1]" /></div>
    <div class="Field">価格</div>
    <div class="Field"><input type="text" id="Price[1]"  /></div>
  </div>
  <div class="FieldFrame">
    <div class="Field">品名</div>
    <div class="Field"><input type="text" id="Product[2]" /></div>
    <div class="Field">価格</div>
    <div class="Field"><input type="text" id="Price[2]"  /></div>
  </div>

</body>
</html>

JsonObjectInHtml.css

.FieldFrame {
  display:flex;
}

解説

下記コードでJSON形式の構造化データを記述しています。今回は、name と price の2つのメンバを持つオブジェクトを3つ配列形式で記述しています。
データはdata変数に代入しています。data[0]で (name="ぺんぎんクッキー",price=250)のオブジェクトにアクセスできます。

  var data = [
    { "name": "ぺんぎんクッキー", "price": 250 },
    { "name": "らくだキャラメル", "price": 80 },
    { "name": "かるがもサブレ", "price": 160 }
  ];

以下のJavaScriptのコードは、forループでテキストボックスにJSONのデータ内容を設定するコードです。
id=Product[i] のテキストボックスにJSONのnameの値を設定し、id=Price[i] のテキストボックスにJSONのpriceの値を設定します。

  for (var i = 0; i < 3; i++) {
    var PrdBox = "Product[" + i + "]";
    var PriceBox = "Price[" + i + "]";
    var PrdElem = document.getElementById(PrdBox);
    var PriceElem = document.getElementById(PriceBox);

    if (i < data.length) {
      PrdElem.value = data[i].name;
      PriceElem.value = String(data[i].price);
    }
  }

[Exec]ボタンをクリックすると、onButtonClick();関数を呼び出し、テキストボックスに値を設定します。

  <input type="button" onclick="onButtonClick();" value="Exec"/>

実行結果

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

[Exec]ボタンをクリックします。テキストボックスに値が設定されます。設定された値は、HTML内のJSONで記述した値になっています。

プログラム:処理を加える例

JSONデータを読み込み、処理を加える例です。

コード

以下のHTMLファイルを作成します。

JsonObjectInHtml.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript">
    var data = [
      { "name": "ぺんぎんクッキー", "price": 250 },
      { "name": "らくだキャラメル", "price": 80 },
      { "name": "かるがもサブレ", "price": 160 }
    ];

    function onButton1Click() {
      for (var i = 0; i < 3; i++) {
        var PrdBox = "Product[" + i + "]";
        var PriceBox = "Price[" + i + "]";
        var PrdElem = document.getElementById(PrdBox);
        var PriceElem = document.getElementById(PriceBox);

        if (i < data.length) {
          PrdElem.value = data[i].name;
          PriceElem.value = String(data[i].price);
        }
      }
    }

    function onButton2Click() {
      for (var i = 0; i < 3; i++) {
        var PrdBox = "Product[" + i + "]";
        var PriceBox = "Price[" + i + "]";
        var PrdElem = document.getElementById(PrdBox);
        var PriceElem = document.getElementById(PriceBox);

        if (i < data.length) {
          PrdElem.value = data[i].name;
          PriceElem.value = String(Math.floor(data[i].price * 0.8));
        }
      }
    }
  </script>
</head>
<body>
  <h2>HTMLファイル中のJSONから値を取得する</h2>
  <input type="button" onclick="onButton1Click();" value="Exec" />
  <input type="button" onclick="onButton2Click();" value="Exec (20% Off)" />
  <hr />
  <div class="FieldFrame">
    <div class="Field">品名</div>
    <div class="Field"><input type="text" id="Product[0]" /></div>
    <div class="Field">価格</div>
    <div class="Field"><input type="text" id="Price[0]" /></div>
  </div>
  <div class="FieldFrame">
    <div class="Field">品名</div>
    <div class="Field"><input type="text" id="Product[1]" /></div>
    <div class="Field">価格</div>
    <div class="Field"><input type="text" id="Price[1]" /></div>
  </div>
  <div class="FieldFrame">
    <div class="Field">品名</div>
    <div class="Field"><input type="text" id="Product[2]" /></div>
    <div class="Field">価格</div>
    <div class="Field"><input type="text" id="Price[2]" /></div>
  </div>

</body>
</html>

JsonObjectInHtml.css

.FieldFrame {
  display:flex;
}

解説

[Exec (20% Off)]のボタンがクリックされた場合は、onButton2Click()関数を呼び出します。

  <input type="button" onclick="onButton2Click();" value="Exec (20% Off)" />

onButton2Click()では、先の例と同様にJSONデータの内容をテキストボックスに設定しますが、priceの値を0.8倍する処理を追加しています。

    function onButton2Click() {
      for (var i = 0; i < 3; i++) {
        var PrdBox = "Product[" + i + "]";
        var PriceBox = "Price[" + i + "]";
        var PrdElem = document.getElementById(PrdBox);
        var PriceElem = document.getElementById(PriceBox);

        if (i < data.length) {
          PrdElem.value = data[i].name;
          PriceElem.value = String(Math.floor(data[i].price * 0.8));
        }
      }
    }