JSONデータの処理

JSONファイルから読み込み
HTML中に記述
- 値の取得

オブジェクトの配列型のJSONの読み込み - JavaScript

JavaScriptでオブジェクトの配列型のJSONを読み込んで値を取得するコードを紹介します。

概要

こちらの記事ではシンプルなオブジェクトのJSONの読み込み(パーシング)を紹介しました。この記事ではJSONがオブジェクトの配列形式で取得した場合に処理をするコードを紹介します。
配列で渡された場合も同様に、JSON.parseメソッドで読み込みを実行します。結果が配列で返されますので、lengthプロパティで配列の長さを取得し、ループ処理で個々のオブジェクトにアクセスできます。

プログラム1: forループで処理する例

互換性などを考慮するとforループでオーソドックスに処理する方法がおすすめかと思われます。

コード

下記のHTMLファイルを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    function getJson() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var data = JSON.parse(xmlhttp.responseText);

            var elem = document.getElementById("output");

            for (i = 0; i < data.length; i++) {
              if (data[i] != null) {
                elem.innerHTML += "<div>" + data[i].code + " : " + data[i].name + " : " + data[i].price + "</div>";
              }
            }

          } else {
          }
        }
      }
      xmlhttp.open("GET", "data-array.json");
      xmlhttp.send();
    }
  </script>
</head>
<body>

  <input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
  <hr />
  <div>受信情報</div>
  <div id="output"></div>
</body>
</html>

JSONファイル

読み込むJSONファイルです。

[
  {
    "code": "G-010",
    "name": "ぺんぎんクッキー",
    "price": 200
  },
  {
    "code": "G-021",
    "name": "らくだキャラメル",
    "price": 100
  },
  {
    "code": "G-034",
    "name": "しろくまアイス",
    "price": 180
  },
  {
    "code": "G-018",
    "name": "あひるサブレ",
    "price": 270
  },
  {
    "code": "G-25",
    "name": "くじらケーキ",
    "price": 360
  }
]

解説

JSONファイルの取得部分とparseメソッドの呼び出しに関してはこちらの記事を参照して下さい。
読み込まれた結果のdataは配列型になっているため、lengthプロパティにアクセスすると配列長が取得できます。forループで配列の要素を順番に処理します。

for (i = 0; i < data.length; i++) {
  //(中略...)
}

配列の要素がnullでないことを確認し、id="output" の要素として取得したelemのinnerHTMLに値を設定します。ループで処理されるため、 += 演算子を利用して元の値に追加します。(=のみですと最後の要素で上書きされてしまい、最後の要素のみが画面に表示されるだけになってしまいます。)
data[i] の記述で配列内のJSONのオブジェクトにアクセスできます。オブジェクトのメンバ値はフィールド名を記述して取得します。

  if (data[i] != null) {
    elem.innerHTML += "<div>" + data[i].code + " : " + data[i].name + " : " + data[i].price + "</div>";
  }

実行結果

JSONファイルとHTMLファイルを同じディレクトリに配置して実行します。
WebブラウザでHTMLファイルを表示します。下図の画面が表示されます。

[JSON読み込み]ボタンをクリックします。下図の画面が表示されます。JSONファイルを読み込み、配列のそれぞれのオブジェクトの要素を取得できていることがわかります。

プログラム2: Array.prototype.forEach で処理する例

Array.prototype.forEach 文で処理するコード例です。getJson 関数を下記に変更します。Array.prototype.forEach は EcmaScript 5 以降で利用可能です。

  function getJson() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var data = JSON.parse(xmlhttp.responseText);

            var elem = document.getElementById("output");

            data.forEach(function (value, index, data) {
                 elem.innerHTML += "<div>" + value.code + " : " + value.name + " : " + value.price + "</div>";
            });

          } else {
          }
        }
      }
      xmlhttp.open("GET", "data-array.json");
      xmlhttp.send();
    }

実行結果は先のコードと同様になります。

プログラム3: for of で処理する例

for of で処理するコード例です。getJson 関数を下記に変更します。for of 文はInternet Explorer では動作しないことに注意が必要です。

 function getJson() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var data = JSON.parse(xmlhttp.responseText);

            var elem = document.getElementById("output");

            for (var item of data) {
              elem.innerHTML += "<div>" + item.code + " : " + item.name + " : " + item.price + "</div>";
            }

          } else {
          }
        }
      }
      xmlhttp.open("GET", "data-array.json");
      xmlhttp.send();
    }

実行結果は先のコードと同様になります。