【初心者用】jQueryを使ってjsonデータをhtmlに生成する

更新の頻度と手間を踏まえてサイト構築を考えていると、制作チームが毎回htmlを書き換えるより、jsonのテキストデータならhtmlがわからない人でもファイルの書き換えができるという利点から、jsonを使用してみようという話になったので、その時の学習メモ。

スポンサーリンク

jsonの知識はあったが、自分で作ったことは無かったので、まったくの初心者がjsonデータを作っていきます。
(立ち位置的にはデザイナーなんだけどな…)

今回は簡単なjsonデータを作成して、htmlに出力するまでをメモしています。

1.jsonデータをページ内に直接書く場合

script内にjsonデータを記述していきます。
(jsonデータは外部から読み込むのが基本なので、script内に記述しているデータがjsonとは言わないですが、練習用なのでそこはスルーしてください。)

javascript

$(function() {
    var data = [
        { "animal": "いぬ", "type": "パグ" },
        { "animal": "ねこ", "type": "ペルシャ" },
        { "animal": "うさぎ", "type": "ネザーランド・ドワーフ" },
        { "animal": "ハムスター", "type": "ジャンガリアンハムスター" },
    ];
});

読み込むときは、任意の場所にidを指定してあげて下さい。

html


<ul id="contents_list"></ul>

このままだと読み込むことはできないので、jsで読み込む動きを作ります。
for・in文を使ってhtml側へ出力をします。

javascript

$(function() {
    //データ
    var data = [
        { "animal": "いぬ", "type": "パグ" },
        { "animal": "ねこ", "type": "ペルシャ" },
        { "animal": "うさぎ", "type": "ネザーランド・ドワーフ" },
        { "animal": "ハムスター", "type": "ジャンガリアンハムスター" },
    ];

    //出力する処理
    for(var i in data){
        $("#contents_list").append("<li>" + data[i].animal + "（" + data[i].type + "）</li>");
    }
});

サンプルページを表示

これでscript内に記述されているjsonデータを出力することができました。

2.jsonデータを外部ファイルで読み込む場合

jsonデータを外部ファイルとして扱う場合は、サーバーにアップしないと使用できません。
(ローカルでjsonファイルがなんで読めないんだろうと悩んでました…)

外部ファイルとして扱う方法としては、getJSON関数を使えばjsonデータを簡単に読み込んで使用することができます。
getJSON()関数で外部のjsonデータを受け取り、1.と同様にfor・in文を使ってhtml側へ出力をします。

1.でscript内に記述したものを以下のように書き換えます。

json

[
    {
        "animal": "いぬ",
        "type": "パグ"
    },
    {
        "animal": "ねこ",
        "type": "ペルシャ"
    },
    {
        "animal": "うさぎ",
        "type": "ネザーランド・ドワーフ"
    },
    {
        "animal": "ハムスター",
        "type": "ジャンガリアンハムスター"
    }
]

この書き換えたファイルをsample0915.jsonとします。
html側は以下のように書き換えます。

html

<ul id="contents_list2"></ul>

何も書き換えていません。idで読み込むのに変わりはありません。
※1.と読み込みを変えるため、id名のみ変更しています。

getJSON関数で外部のjsonデータ(sample0915.json)を受け取り、htmlに出力する動作を作ります。

javascript

$(document).ready(function () {
    $.getJSON("sample0915.json", function(data){
        for(var i in data){
            $("#contents_list2").append("<li>" + data[i].animal + "（" + data[i].type + "）</li>");
        }
    });
});

サンプルページを表示
※1.2.ともに出力結果は同じです。

これで外部のjsonデータをhtmlに出力することができました。
次回は、もう少し運用に沿った形のhtmlを出力できるjsonデータを作ろうと思います。

参考
外部のJSONデータをjQueryを使ってHTMLへ出力する
https://designsupply-web.com/knowledgeside/1463/

jQueryでjsonデータを扱ってみる【入門編】
https://www.webopixel.net/javascript/91.html

PAGE TOP