JQueryでJSONデータを基に動的にテーブルを作成する方法

モバイルIT
スポンサーリンク

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の中身はこんな感じという想定です。今回は2列とかなり少ないものですが、別に何列でも構いません。

//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を返すコードを書いてあげても良いかもしれませんね。

このやり方は結構色々応用が効きそうなので、皆さんも試してみてください。

モバイルITブログ運営
スポンサーリンク
スポンサーリンク
当サイトの運用レンタルサーバ
1.超高速Webサーバー「LiteSpeed」と「HTTP/2」「QUIC」の高速化技術にも対応。
2.全プラン最新のCPU・大容量メモリ・ピュアSSDを採用。
3.最新のスペックと技術でWordPressをより高速・安全に表示!
4.東日本・西日本のリージョン選択が可能な “地域別”の自動バックアップを無料で搭載。
5.次世代セキュリティ「Imunify360」でマルウェア、改ざんを防止。
6.「かんたん操作のコンパネ/cPanel」を採用!
7.無料SSL(COMODO)に標準対応。
8.マルチドメイン・データベース・メールアドレス、すべて無制限。
9.ライブチャット・電話・メールに対応した安心のサポート体制。
10.ドメイン取得が可能!業界トップクラスの「バリュードメイン」を採用。

プロモーションコード(クーポンコード)
2021年5月31日まで

初年度50%OFFクーポンプレゼント!
SV50U13AT4H5KY
【当サイト運用】コスパ最強のColorfulBox(カラフルボックス)のオススメポイント
スポンサーリンク
スポンサーリンク
\この記事が役に立ったらシェアしよう/
デジライン

Comments

スポンサーリンク
こちらの記事も読まれています
スポンサーリンク

この記事を書いた人

Taka

モバイルシステムエキスパート。某大手IT企業でエンジニアをやりながら、モバイルIT系ブロガーをやっております。独学でプログラミング勉強してWEBアプリ作ったりしながら、日々の生活の中で面白そうな情報を記事にしています。レビュー依頼などはお問合せからお願いします。

\フォローする/
タイトルとURLをコピーしました