OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

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

最終更新日:2020.2.15 Update!!
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)での出力は変数の中に子要素用のループを追加する形になります。  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram