外部のJSONデータをjQueryを使ってHTMLへ出力する

jQueryで外部のJSON形式のデータをHTMLの中に出力する方法です。JSONはデータ内容の構成がわかりやすいのでデータを扱う際に便利です。方法としては、getJSON()関数で外部のJSONデータを受け取り、for…in文を使ってHTML側へ出力します。  

JSON形式のデータを受け取る

受け取るデータが入ったJSONデータは次の通りです。   【JSON（sample.json）】

[
  {
    "list": "リストA",
    "content": "コンテンツA"
  },
  {
    "list": "リストB",
    "content": "コンテンツB"
  },
  {
    "list": "リストC",
    "content": "コンテンツC"
  }
]

  次に呼び出すjQueryと出力されるHTML側のソースコードです。   【HTML / jQuery】

<dl id="wrap">
  <script type="text/javascript">
    $(function(){
      $.getJSON("../json/sample.json", function(sample_list){
        for(var i in sample_list){
          var h = '<dt>'
                + sample_list[i].list
                + '</dt>'
                + '<dd>'
                + sample_list[i].content
                + '</dd>';
          $("dl#wrap").append(h);
        }
      });
    });
  </script>
</dl>

  【HTML】（出力後）

<dl id="wrap">
  <dt>リストA</dt><dd>コンテンツA</dd>
  <dt>リストB</dt><dd>コンテンツB</dd>
  <dt>リストC</dt><dd>コンテンツC</dd>
</dl>

JSONファイルで保存されているデータが呼び出されHTML内に出力されます。  

入れ子（ネスト構造）になっているJSON形式のデータを受け取る

JSON形式のデータが入れ子（ネスト構造）になっている多重階層の場合はこのような形で実装していきます。   【JSON（nest_sample.json）】

[
  {
    "list": "リストA",
    "content": "コンテンツA"
    "nestList": [
      {"nestContent": "子要素リストA1"},
      {"nestContent": "子要素リストA2"},
      {"nestContent": "子要素リストA3"},
      {"nestContent": "子要素リストA4"}
    ]
  },
  {
    "list": "リストB",
    "content": "コンテンツB"
    "nestList": [
      {"nestContent": "子要素リストB1"},
      {"nestContent": "子要素リストB2"},
      {"nestContent": "子要素リストB3"}
    ]
  },
  {
    "list": "リストC",
    "content": "コンテンツC"
    "nestList": [
      {"nestContent": "子要素リストC1"},
      {"nestContent": "子要素リストC2"}
  }
]

  【HTML / jQuery】

<dl id="wrap">
  <script type="text/javascript">
    $(function(){
      $.getJSON("../json/nest_sample.json", function(nest_sample_list){
        for(var i in nest_sample_list){
          var h = '<dt>'
                + nest_sample_list[i].list
                + '</dt>'
                + '<dd>'
                + nest_sample_list[i].content
                + '<ul class="nest">';
                for(var j in nest_sample_list[i].nestList){
                  h += '<li>'
                     + nest_sample_list[i].nestList[j].nestContent
                     + '</li>';
                }
                h += '</ul>'
                   + '</dd>';
          $("dl#wrap").append(h);
        }
      });
    });
  </script>
</dl>

  【HTML】（出力後）

<dl id="wrap">
  <dt>リストA</dt>
  <dd>コンテンツA
      <ul class="nest">
          <li>子要素リストA1</li>
          <li>子要素リストA2</li>
          <li>子要素リストA3</li>
          <li>子要素リストA4</li>
      </ul>
  </dd>
  <dt>リストB</dt>
  <dd>コンテンツB
      <ul class="nest">
          <li>子要素リストB1</li>
          <li>子要素リストB2</li>
          <li>子要素リストB3</li>
      </ul>
  </dd>
  <dt>リストC</dt>
  <dd>コンテンツC
      <ul class="nest">
          <li>子要素リストC1</li>
          <li>子要素リストC2</li>
      </ul>
  </dd>
</dl>

JSONデータの入れ子で記述されていた子要素のリストが親要素のリスト内に挿入されました。   JSONデータの中にある子要素の値については、親の値にドットで続けて表記していきます。そしてjQuery（javascript）での出力は変数の中に子要素用のループを追加する形になります。