jQueryでJSONデータを取得してHTMLに出力してみた。

jQueryでJSONデータを取得してHTMLに出力してみた。

htmlは同じで、画像やテキストなどの中身だけ更新。

っていう作業がだるくて。

 

htmlのソースをコピペして増殖させていくと、テキストを書き換えるときに間違えそうだし。

だからといって、CMSで管理するほどの内容ではないのだよねえ。

直書きしていったらhtmlが長くなっちゃうのもいやーだ!

 

というわけで、わたしはなにがしたいかというと、楽をしたい。

JSONデータを作って、htmlは更新しない感じにしたいと思います。

 

 

今回やったのはこのページで、

次はどこ行く?CAMERATRIP

 あ。このページ、カメラがぶらーん、ぶらーんって動いてるので、よかったら見ていってくださいね。

 

 

こちらの部分でございまして、

①から④の情報を気が向くと更新していますが、これまでhtmlに直書きしておりました。

こんな具合に ↓

 

このliの中身をJSONのデータにして、JSでhtmlをループさせたらいいんやで!

データを追加したり削除したいときは jsonファイルだけ触れば良いわけで、そのほうが間違いも起きなさそうな気がするんだ。

 

 


JSONってなんやねん

{ } の中に、キー(key)と値(value)をコロンで区切って書くデータフォーマットです。

JSONは「JavaScript Object Notation」の略で、元々はJSと他の言語とのやりとりのために考えられたものらしい。へえー。

 

「だいすきなの」

1 いぬ

2 ねこ

3 しまえなが

 

これを、csvとxmlとJSONの各フォーマットにしてみると・・

 

CSV

  ID,Name
  1,いぬ
  2,ねこ
  3,しまえなが

 

XML

<XML>
 <Favorite>
  <ID>1</ID>
  <Name>いぬ</Name>
 </Favorite>
  <Favorite>
  <ID>2</ID>
  <Name>ねこ</Name>
 </Favorite>
   <Favorite>
  <ID>3</ID>
  <Name>しまえなが</Name>
 </Favorite>
</XML>

 

JSON

{
  "favorite" : [
    {
      "id":"1";
      "name":"いぬ",
    },
    {
      "id":"2";
      "name":"ねこ",
    },
    {
      "id":"3";
      "name":"しまえなが",
    }
  ]
}

 

んー。なるほどねー。

たしかに、某表計算ソフトではcsvを使った方が良いもんなー。用途によって使い分けするということか。

JSONさんはAPIでテキストデータを処理するときとか、Ajaxの非同期通信をしたりとか、ここ最近のwebでも活躍してますのでJSONさんと仲良くなろうと思います。よろしくねJSON。

 

ではさっそく。今回の作業の流れから

まずは、こちらを用意します。

用意するもの

・html
・jsonファイル
・js(jQuery)

なにをするかはこんな流れ。

やることリスト

・コーディングしとく
・jsonファイル作る(一度読み込み確認しよう)
・セットしたjsonデータを取り込み、htmlをループして出力(js)

そんな感じでレッツ、スタート。

 


htmlはこんなかな?

ulにしました。tableでもdlでもなんでもいいと思います。

 

<ul id="lists">
  <li>
    <p>いぬ</p>
    <img src="画像のパス/画像名">
  </li>
  <li>
    <p>ねこ</p>
      <img src="画像のパス/画像名">
  </li>
  <li>
    <p>しまえなが</p>
    <img src="画像のパス/画像名">
  </li>
</ul>

 


jsonファイルを用意します

「.json」って拡張子にします。中身はこんな感じで

 

{
	"l1":{
		"name":"いぬ",
		"filename":"画像のパス/画像名",
	},
	"l2":{
		"name":"ねこ",
		"filename":"画像のパス/画像名",
	},
	"l3":{
		"name":"しまえなが",
		"filename":"画像のパス/画像名",
	}
}

 

こういう感じでも大丈夫です。

 

{
  "list" : [
    {
		"name":"いぬ",
		"filename":"画像のパス/画像名",
		},
		{
		"name":"ねこ",
		"filename":"画像のパス/画像名",
		},
		{
		"name":"しまえなが",
		"filename":"画像のパス/画像名",
		}
  ]
}

 

お好みでどうぞ。

 


JS(jQuery)で

まずは console.log で出力してみて、データがちゃんと出るかなーと確認をしましょう。

先ほど作ったjsonファイルのパス/ファイル名を let json = 'ここに記述します'。

 

$(function(){
  let json= 'json/hogehoge.json';
 $.getJSON(json, function(data){
      console.log(data)
  });
});

 

こんなふうに出てきたらOKです。

 

console.log やっても null になるので、おかしいなおかしいなって調べたら json ファイルの最後にカンマ入れちゃってました。←これ

 

こういうことが起きるんですね。

 

null ってなっちゃう場合は、パスが間違ってないかなーとか、URL叩くとこういうふうに出てきますので、ファイルを置いたときにブラウザで確認してみても◎。

 

 

無事に出力ができていたら、次はhtmlをループさせる処理。

 

for(let i in data){
    $('#lists').append('<li><p>' + data[i].name + '</p><img src="' + data[i].filename + '"></li>');
}

 

というわけでこんな感じになります。

 

$(function(){
  let json = './json/hogehoge.json';
    $.getJSON(json, function(data){
      for(let i in data){
      $('#lists').append('<li><p>' + data[i].name + '</p><img src="' + data[i].filename + '"></li>');
    }	
  });
});

 

 


 

で今回、わたしがやったわたしのサイトの場合ですが、li に data-group っていう属性名をつけて「関東」「九州」などと地方で分類し、タブで表示切り替えができるようにしてあったんですね。忘れてました。なので、data-group も jsonデータに含めてしまい、

 

このような形にしてみましたが、データの持ち方次第では、例えば表示/非表示をコントロールしたりだとか、新しく投稿したものに「New!」ってアイコンつけたりだとか、それから任意の順番でソートしたりとかいろんなことできますので、データベースの設計ってやっぱり重要で、最初が肝心なのだなーって思いました。

 

JSONデータは、タブでコンテンツを切り替えるページや簡素なお知らせ一覧など、ページの中でなにか部分的な更新とかそんなちょっとしたところで使えると思います。便利だね。

 

 

 

 

share on

まだ見ぬソール・ライター THE UNSEEN SAUL LEITER

THE UNSEEN SAUL LEITERまだ見ぬソール・ライター

世界のキッチンから 商品開発と写真の関係

世界のキッチンから商品開発と写真の関係

ミナ ペルホネン / 皆川明 つづく

ミナ ペルホネン / 皆川明つづく

イラスト図解式 この一冊で全部わかる Web技術の基本

Web技術の基本イラスト図解式 この一冊で全部わかる

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なるほどデザイン目で見て楽しむ新しいデザインの本

広報・PR・販促担当者のための伝わるコンテンツ制作ガイド

広報・PR・販促担当者のための伝わるコンテンツ制作ガイド

海外Webマーケティングの教科書

海外Webマーケティング
の教科書