JQueryに少しずつ慣れてくると、色んなことをフロント側でやってみたくなりますよね。今回はJQueryを使って、外部からデータを取得し、そのデータを元に動的にテーブルを作成するコードを書いてみます。
大まかな仕組み
今回のコードの仕組みとしては大体こんな感じです。
- HTMLでテーブルヘッダ<thead>とテーブルボディ<tbody>を作成しておく
- ajaxでjsonデータを取得し、配列に格納しておく
- 配列を動的にテーブルに展開する
ここでは表示するデータを外部のサービスからjsonで取得し、その取得したデータを一度配列に入れた上で予め用意した<tbody>内に展開する。そんな感じでやっていきます。
基本の中身
HTML部
先ずは基本としてhtmlの部分を書いていきます。
今回は当サイトで作っているクイズアプリの問題数を表示するコンテンツを作ってみます。
<table>
<thead>
<tr>
<th>クイズ種別</th>
<th>問題数</th>
</tr>
</thead>
<tbody id="usage-table-body"></tbody>
</table>今回のテーブルの場合は、テーブルヘッダを’クイズタイプ’、’クイズ区分’、’問題数’と3つ作成し、テーブルの中身は<tbody>部にはめ込んでいくような形にしていきます。
JQueryコード部
次にJQueryでjsonデータを取得する部分を書いていきますね。今回はsample.jsonというファイルがサーバにあるという想定です。
$.ajax({
type: "GET",
url: 'http://localhost/sample.json',
}).done(function(data, dataType) {
var usage_arr = JSON.parse(data);
//データをテーブル形式にする
$.each(usage_arr,function(i,quizdata){
var text_quiz_shubetu = quizdata.quiz_shubetu;
var text_quiz_qty = quizdata.qty;
var tr = $('<tr />');
var quiz_shubetu = $('<td />').text(text_quiz_shubetu);
var quiz_qty = $('<td />').text(text_quiz_qty + ' 問');
tr.append(quiz_shubetu);
tr.append(quiz_qty);
$('#usage-table-body').append(tr);
});
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
// エラーメッセージの表示
console.log('Error : ' + errorThrown + ", Reason: " + textStatus);
});またsample.jsonの中身はこんな感じという想定です。今回は２列とかなり少ないものですが、別に何列でも構いません。
//sample.json
{
{
"quiz_shubetu":"一陸特",
"qty":"356"
}
{
"quiz_shubetu":"二陸特",
"qty":"250"
}
}手順としては、ajaxのメソッドを使用して、sample.jsonをGETしていきます。GETで取得したjsonデータをJSON.parseで解析してあげた上でusage_arr変数に入れておきます。
次にusage_arr変数を.eachメソッド に入れてあげて要素ごとに一つずつ取り出していきます。因みにeachではなく.eachになっているの注意してください。.eachはオブジェクトに対して使うメソッドで今回はjsonで取得したデータを変数にオブジェクトとして入れているので、こんな感じにしています。
あとはデータを一つずつ<td>セレクタに入れてあげるのですが、途中の変換用の変数quiz_shubetuとquiz_qtyも1回ずつ入れた上で、先ずは<tr>にappend、そのままtr自身を#usage-table-bodyの<tbody>の中にappendしてあげるという処理になっています。
因みにappendはJQueryのメソッドで子要素に追加するというメソッドになります。
//データをテーブル形式にする
$.each(usage_arr,function(i,quizdata){
var text_quiz_shubetu = quizdata.quiz_shubetu;
var text_quiz_qty = quizdata.qty;
var tr = $('<tr />');
var quiz_shubetu = $('<td />').text(text_quiz_shubetu);
var quiz_qty = $('<td />').text(text_quiz_qty + ' 問');
tr.append(quiz_shubetu);
tr.append(quiz_qty);
$('#usage-table-body').append(tr);
});これだけでテーブルが動的に仕上げることができるはずです。
因みにテーブルの方の見た目をキレイにしたかったら、css側を入れてあげれば良いだけです。但し、今回のサンプルだと、<tbody>にしかセレクタを割り当てていないので、適当なclassなりidなりをつけてあげれば良いだけですね。
最後に
今回はサクッとjsonをテーブルに入れる方法を紹介していきました。正直個人でjsonでデータを連携させるようなAPIはGoogle Spread Sheetぐらいかなとも思うのですが、それでも例えばラズパイのセンサーで取得したデータをGoogle スプレッドシートに入れておいて、そのデータをjsonで取得して、ウェブページに公開する。そんな使い方も面白いのかと思います。
あとは自分でサーバ側にPHPなりPythonなりでSQLテーブルのデータをjsonを返すコードを書いてあげても良いかもしれませんね。
このやり方は結構色々応用が効きそうなので、皆さんも試してみてください。
コメント