超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
jQuery2013年7月31日
前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。
- js中に記述されたJSONデータからHTMLに表示
- 外部ファイルのJSONデータからHTMLに表示
- JSONPで外部ファイルのJSONデータからHTMLに表示
1.js中に記述されたJSONデータからHTMLに表示
まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。
HTML
<table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%" /> <tbody> <tr> <th></th> <td></td> </tr> </tbody> </table> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/info.js"></script>
JS
$(function(){
//JSONデータ
var data = {"release": [
{
"day": "2013.07.30",
"label": "company",
"category": "企業情報",
"content": "テキストテキストテキスト",
"url": "http://www.yahoo.co.jp/",
"target": "_blank"
},
{
"day": "2013.07.30",
"label": "products",
"category": "商品情報",
"content": "テキストテキストテキスト",
"url": "http://www.google.co.jp/",
"target": "_blank"
},
{
"day": "2013.07.30",
"label": "company",
"category": "企業情報",
"content": "テキストテキストテキスト",
"url": "http://www.yahoo.co.jp/",
"target": "_self"
}
]}
//HTMLを初期化
$("table.tbl tbody").html("");
//HTMLを生成
for(var index in data.release){
$('<tr>'+
'<th>'+data.release[index].day+'</th>'+
'<td class="label"><span class="' +
data.release[index].label + '">' +
data.release[index].category +
'</span></td>'+
'<td><a href="' + data.release[index].url +
'" target="' + data.release[index].target +
'">' + data.release[index].content + '</a></td>'+
'</tr>').appendTo('table.tbl tbody');
}
});
解説
いったんHTMLを空にした後、for文の中身でHTMLを生成します。変数「data」の中にある「release」内の配列を参照し、appendToでHTMLに挿入しています。
2.外部ファイルのJSONデータからHTMLに表示
主に実案件ではこちらの方法が使われるケースが多いかと思います。
- ※ HTMLは前述のものと同じ
JSON
{"release": [
{
"day": "2013.07.30",
"label": "company",
"category": "企業情報",
"content": "テキストテキストテキスト",
"url": "http://www.yahoo.co.jp/",
"target": "_blank"
},
{
"day": "2013.07.30",
"label": "products",
"category": "商品情報",
"content": "テキストテキストテキスト",
"url": "http://www.google.co.jp/",
"target": "_blank"
},
{
"day": "2013.07.30",
"label": "company",
"category": "企業情報",
"content": "テキストテキストテキスト",
"url": "http://www.yahoo.co.jp/",
"target": "_self"
}
]}
js
$(function(){
//HTMLを初期化
$("table.tbl tbody").html("");
//HTMLを生成
$.getJSON("json/data.json", function(data){
$(data.release).each(function(){
$('<tr>'+
'<th>'+this.day+'</th>'+
'<td class="label"><span class="' + this.label + '">' +
this.category + '</span></td>'+
'<td><a href="' + this.url + '" target="' +
this.target + '">' + this.content + '</a></td>'+
'</tr>').appendTo('table.tbl tbody');
})
})
});
解説
こちらのJSONデータはjsの中に記述した場合と異なり、「var data = 」の部分を削除しています。
jQueryのgetJCONメソッドを使い、jsonファイルにアクセスしデータを取得します。あとはthisでそれぞれの配列データを参照することで簡単にHTMLに表示することができます。XMLの処理に比べてjsの記述はかなりコンパクトになります。
3.JSONPで外部ファイルのJSONデータからHTMLに表示
JSONPって何？
簡単に言えば、HTMLのscriptタグでJSONデータを読み込みことで、クロスドメイン間のデータのやり取りを可能にする技術です。これにより、外部ドメインに格納されているJSONデータにアクセスし、処理を行うことが可能になります。
HTML
<table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%" /> <tbody> <tr> <th></th> <td></td> </tr> </tbody> </table> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/info.js"></script> <script src="http://www.ezgate-mt.sakura.ne.jp_tips/entry161/sample3/json/data.json"></script>
- ※以下の記述が追加されています
<script src="http://www.ezgate-mt.sakura.ne.jp_tips/entry161/sample3/json/data.json"></script>JSON
var data = {"release": [
{
"day": "2013.07.30",
"label": "company",
"category": "企業情報",
"content": "テキストテキストテキスト",
"url": "http://www.yahoo.co.jp/",
"target": "_blank"
},
{
"day": "2013.07.30",
"label": "products",
"category": "商品情報",
"content": "テキストテキストテキスト",
"url": "http://www.google.co.jp/",
"target": "_blank"
},
{
"day": "2013.07.30",
"label": "company",
"category": "企業情報",
"content": "テキストテキストテキスト",
"url": "http://www.yahoo.co.jp/",
"target": "_self"
}
]}
js
$(function(){
//HTMLを初期化
$("table.tbl tbody").html("");
//HTMLを生成
for(var index in data.release){
$('<tr>'+
'<th>'+data.release[index].day+'</th>'+
'<td class="label"><span class="' +
data.release[index].label + '">' +
data.release[index].category +
'</span></td>'+
'<td><a href="' + data.release[index].url +
'" target="' + data.release[index].target +
'">' + data.release[index].content + '</a></td>'+
'</tr>').appendTo('table.tbl tbody');
}
});
解説
ほとんど実際のjsの記述はJSONと変わりません。XMLではほぼ不可能だった、クロスドメイン間の処理がこれで簡単に実現できます。
まとめ
JSONはXMLよりも簡単に扱える上、誰でもデータにアクセスし処理が可能になります。
そのため、クロスサイトスクリプティングなどのセキュリティには配慮する必要がありますが、処理も軽く実際のWebの現場でも非常に積極的に使われています。今後もデータの処理形式としては多用されることが予想されるので、覚えておいて損はないでしょう。
むしろ実案件ではXMLよりもJSONのほうが実装が多くなってきているような気もします。
この記事を読んでいる方にオススメの記事
- jQueryjQueryでブロックレベルの高さを揃える
- jQuery順序付きリスト[Ordered List]の昇降を逆にする
- jQueryニュースティッカーをjQueryで実装する／bxslider編
- jQueryチェックボックスの一括チェック（全選択）／一括解除（全解除）
- jQueryjQueryでオリジナルツールチップを使用する
- jQueryjQueryでタブメニューを実装（テキストメニュー版）
- ※承認制のため、即時には反映されません。
この記事にコメントする