【JSON】外部のJSONデータをHTMLに出力
JSONとは？
そもそもJSONとは何なのか、というところの解説から始めたいと思います。
「JSON」はデータフォーマットの一種です。名称は「JavaScript Object Notation」を略したもので、Javascriptにおけるオブジェクトの表記法を由来としています。異なるプログラミング言語同士でデータをやりとりする際に用いられ、Javascriptはもちろんのこと、PHPやPythonなどの言語で利用可能です。
{
"name": "NNC-STUDIO",
"year": 2021,
"president": "中里寛"
}{}波括弧の中にkeyとvalueをコロンで区切って記述する、というのが基本形式です。上の記述例で見ると、「name・year・president」がkey、「NNC-STUDIO・2021・中里寛」がvalueに該当します。その内、keyは必ずダブルクォーテーションで囲わなければなりません（シングルはエラーの原因になります）。
複数記述したい場合は、カンマで区切った後に新しくkeyとvalueの組み合わせを書いていきます。
JSONのデータをHTMLに出力
上のように記述したJSONのデータは、HTML上に呼び出すことが可能です。ここでは、「nnc.json」というファイルのデータをHTMLに出力する方法を見ていこうと思います。まずはコードを一通り確認してしまいましょう。
<div id="area">
<!-- ここに出力 -->
</div>{
"name": "NNC-STUDIO",
"year": 2021,
"president": "中里寛"
}$(function(){
area = $('#area');
$.getJSON("./js/nnc.json", function(data){
for(var i in data){
var name = '<p>'+data[i].name+'</p>';
var year = '<p>'+data[i].year+'</p>';
var president = '<p>'+data[i].president+'</p>';
var content = name + year + president;
$(area).append(content);
}
});
})大まかな流れとしては、以下のようになると思います。
① JSONファイルを用意して、出力したいデータを記述する
② HTML上の出力したい範囲にIDを付与しておく
③ JavascriptでJSONデータを取得・加工して、HTMLの特定範囲に出力する
①・②は非常に簡単に済みますのでここでは省略して、③の各記述について詳しく解説していきます。今回はjQueryを使っての記述になりますので、ご承知おきください。
area = $('#area');まずはデータを出力する範囲を取得し、変数に格納しておきましょう。
$.getJSON("./js/nnc.json", function(data){
//JSONデータを受信した後に実行する処理内容
}jQueryの$.getJSON()関数を用いることで、指定のURLからJSONデータを受け取ることができます。受け取ったjsonデータはここでは「data」という変数に格納され、以降「data[i].keyの名前」と記述することでその値を取得できます。
for(var i in data){
var name = '<p>'+data[i].name+'</p>';
var year = '<p>'+data[i].year+'</p>';
var president = '<p>'+data[i].president+'</p>';
var content = name + year + president;
$(area).append(content);
}for…in文を用いて、JSONファイルに記述されているデータそれぞれに処理を行います。先述したように、「data[i].keyの名前」という形式でそれぞれのvalueを取得することができます。例えば、「data[i].name = NNC-STUDIO」という具合です。ここでは、文字連結を用いてpタグの中にvalueを出力し、変数に格納しています。
最後に、それぞれの変数を合体させて更に新しい変数($content)として用意します。最初に定義した出力範囲をセレクタとして、appendメソッドを用いて$contentを挿入します。
最終的に、下のようなHTMLが出力されるはずです。
<div id="area">
<p>NNC-STUDIO</p>
<p>2021</p>
<p>中里寛</p>
</div>以上で完成です！
