• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン

> Entry >Other>CSS / jQuery / javascript> jQueryでJSONをHTMLに出力する方法

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

ページ移動

関連記事

ユーティリティ

Twitter

記事検索

ページ上部へ