JSONのデータを読み込んでhtmlで表示

<script>
$(function(){
  $.ajax({
    "url":"list.json", //JSONのリンクもしくはURL

    "success":function(data){
   // JSONデータをparseします。
      var data=JSON.parse(data);
      //  appendというmethodを使って#page_linkにulタグを生成します。
      var ul=$('<ul>').appendTo($('#page_link'));
   // データの長さだけfor文で展開します。
      for(var i=0;i<data.length;i++){
        $('<li>').append(
          $('<a>').attr('href',data[i]["path"]).append(
            $('<img>').attr({'src':data[i]["img"],'alt':''})
            ,$('<span>').attr({'class':'page_name'}).text(data[i]["title"])
            )
          ).appendTo(ul);
      }
    },
  })
});
</script>
<div class="page_link" id="page_link"></div>

これでJSONを読み込んでhtmlに出力可能。

参考はこちらの記事です。
techacademy.jp

もしこの記事が気に入りましたらTwitterやってますのでフォローをお願いします。@nade_nadegata