【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マクロ例も作ってみました。
よろしければご活用ください。
