【JSON】外部のJSONデータをHTMLに出力

初めに

どうも、NNCの石上です。
今回は、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>

以上で完成です!

RECENT ENTRIES

  • 【Javascript】GSAPで高度なアニメーションをお手軽に実装しよう

    VIEW MORE
  • 【Javascript】GSAPを使ってアニメーション実装をもっと自由に!

    VIEW MORE
  • 【Jsライブラリ】vanilla-tilt.jsで目を引くホバー演出を実装しよう

    VIEW MORE

CONTACT

contact