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

Wordpress
スポンサーリンク

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

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

スポンサーリンク

当サイトの運用レンタルサーバ

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

スマートホーム x IT x 子育て。大手SIer勤務→ITアーキテクトの経験から面白そうな情報を発信していきます。独学でプログラミング勉強してWEBアプリ作ったり、Pythonいじったりしています。日曜プログラマ&エンジニアさんへタメになる情報をお届けします。

\フォローする/
\この記事が役に立ったらシェアしよう/

オススメキャンペーン

学生なら入らないと損!
タダ同然で使い放題サービス多数のPrime Studentが無料で6ヶ月も見れる!
大学生・院生・専門学生・高専生なら誰でもOK!

Prime Studentなら本や日用品の購入が10%〜15%OFFになる特典や他にも通常のPrime特典が多数あるのに、通常のPrime金額の半額で全部利用できちゃう

お急ぎ便・時間指定使い放題、Prime Videoで映画やテレビ番組も見放題、Prime Musicで音楽も聴けちゃうし、動画・音楽・写真の保存などの特典が多数利用可能

デジモノ
Subscribe
更新通知を受け取る »
guest
0 Comments
Inline Feedbacks
View all comments
タイトルとURLをコピーしました