【Other】【CSS / jQuery / javascript】jQueryでJSONをHTMLに出力する方法
JSONとは、JavaScript Object Notation の略で、XMLのような配列形式のデータフォーマットです。
XMLよりも書き方がシンプルなので初心者でも簡単にデータを作成でき、また軽量なので大きなデータの読み込みにも順応できます。
CMSなどを利用していないスタティックなサイトであっても、JSONに入っているデータをHTML出力する設定にしていれば、JSONさえ編集できれば、HTMLタグを知らない人でも簡単にサイト上の情報を更新できます。
独自のJSON以外にも、facebookのAPIやGoogleのfirestoreなど、JSONでデータを発行しているケースが増えてきました。
JSONからデータを読み込んでHTMLに出力する方法を紹介します。
JSON例
たとえば、こんなJSONがあるとします。
[ { "num":"1", "name":"イチゴ", "url":"http://hoge.net" }, { "num":"2", "name":"リンゴ", "url":"" }, { "num":"3", "name":"バナナ", "url":"http://hoge.com" } }
URLが入っていた場合はリンク付きのテキストを、URLが入っていなかったときはテキストのみを出力してみます。
HTML例
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul id="list"> <!-- ここに出力します --> </ul>
出力にjQueryを利用するので読み込んでおいてください。
他に、JSONから出力したデータの受け皿を予め用意しておきます。
JavaScript例
$(function(){ json = "./list.json"; target = $('#list'); $.getJSON(json, function(data,status){ for(var n in data) { var text = '<li>'; if (data[n].url){ line = '<a href="'+data[n].url+'" target="_blank"><span>'+data[n].name+'</span></a>'; }else{ line = '<i><span>'+data[n].name+'</span></i>'; } text = text+line+'</li>'; $(target).append(text); } }); });
JSONをgetJSONで取得し、取得したdataをforで回します。
最後にappendしてHTMLに出力しています。
最後に
JSONファイルを作成できない人のために、Excelの表からJSONを作成するExcelマクロ例も作ってみました。
よろしければご活用ください。