【プラグイン不要！】jsonファイルからコンテンツを該当のブロックに出し分けるjs
Web2017年7月12日
jsonを読み込むだけでなく、入れ子情報で構成されたjsonファイルの情報をコンテンツとしてページに出力するjsを作成してみましたので、ご紹介させていただきたいと思います。
このスクリプトでできること
単一な情報を列挙するだけではなく、見出し含め要素をDOM生成しブロックごとにコンテンツを構成するページを出力できるような仕組みを作ってみました。
サンプルコード
html
htmlは箱だけ記述しておきます。
<div class="container js-block">
</div>json
blockJSON([
{
"heading": "Aブロック",
"person": [
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=A1"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=A2"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=A3"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=A4"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=A5"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=A6"}
]
},
{
"heading": "Bブロック",
"person": [
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=B1"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=B2"}
]
},
{
"heading": "Cブロック",
"person": [
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=C1"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=C2"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=C3"},
{"img": "http://placehold.jp/333333/ffffff/250x200.png?text=C4"}
]
}
])css
*{margin:0;padding:0;}
img{
max-width:100%;
border:none;
}
.container{
max-width:960px;
margin:0 auto;
}
.container section h2{
background:#efefef;
border-radius:4px;
padding:10px 15px;
margin-bottom:10px;
}
.container section ul li{
float: left;
margin-right: 1.8%;
margin-bottom:1.8%;
width: calc((100% - 1.8% * 3) / 4);
list-style:none;
}
.container section ul li:nth-child(4n){
margin-right:0;
}
.container section ul:after{
clear:both;
content:"";
display:table;
}js
$(function(){
'use scrict';
$.ajax({
type: 'GET',
url: '読み込みたいjsonファイルのパスを記述',
dataType: 'jsonp',
jsonpCallback: 'blockJSON'
})
.then(
/*読み込み成功時*/
function blockJSON(json) {
for(var i in json){
var $num = i;
$(".js-block").append('<section class="js-'+$num+'"><h2>' + json[i].heading + '');
for(var j in json[i].person){
$('section.js-'+$num).find('ul').append("<li><img src=" + json[i].person[j].img + "></li>");
}
}
},
/*読み込み失敗時*/
function () {
alert("読み込み失敗しました");
});
});
- ※jQueryを読み込んでいる場合のスクリプトとなります
解説
入れ子構造のjsonファイルからDOMを生成しています。第一階層の"heading"の値は見出しとして使用し、これをブロックごとにsectionタグで出力しています。第二階層に記述されている"img"は各sectionタグ内のulにそれぞれli要素で出力しています。
上記に記したサンプルのhtmlは箱だけですが、実際にこのjsonとスクリプトで生成されたDOMは以下のようになります。
<div class="container js-block">
<section class="js-0">
<h2>Aブロック</h2>
<ul>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=A1"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=A2"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=A3"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=A4"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=A5"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=A6"></li>
</ul>
</section>
<section class="js-1">
<h2>Bブロック</h2>
<ul>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=B1"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=B2"></li>
</ul>
</section>
<section class="js-2">
<h2>Cブロック</h2>
<ul>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=C1"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=C2"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=C3"></li>
<li><img src="http://placehold.jp/333333/ffffff/250x200.png?text=C4"></li>
</ul>
</section>
</div>デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
一定のルールに従った要素の羅列でサイトの構成される場合、かつ別ファイル化したほうが運用上望ましいと思われる場合に、ご紹介したスクリプトは活用できます。
本記事ではブロックごとに下に並べるレイアウトでご紹介していますが、応用すればタブUIなど、様々なインターフェースに対応させることが可能です。
新着情報など単一要素の羅列だけではなく、こうしてコンテンツ丸ごとjsonで外部ファイル化できるのもjsonのメリットの一つです。jsonでコンテンツを出し分ける際は、ぜひ本記事をご参考にしていただければ幸いです。