【JavaScript】非同期通信でJsonファイルを読み込み、ファイルの内容を表に出力する

■作成するプログラムの概要

・Jsonファイルを非同期で読み込む。

・読み込んだJsonファイルの内容について、HTMLの表に出力する。

・Jsonファイルは「ID」と「部署名」を記入する。

▼実行環境

Visual Studio Codeの「Live Server」環境下で実行するものとする。

■フローチャート

▼Jsonファイル読込処理（非同期）

▼表作成処理

■プログラム仕様

▼Jsonファイル読込処理（非同期）

入力処理内容出力
–Jsonファイル名（相対パス）をセットする。
ファイル名（相対パス）：./department.json
※JsonファイルはJavaScriptを実行するHTMLファイルと同階層にする。		–
–「XMLHttpRequest」をインスタンスする。–
【Jsonファイル】
部署名		Jsonファイルを開く（非同期）。
※「XMLHttpRequest」のOpenメソッドを使用		–
–Jsonファイルを読み込む。
※「XMLHttpRequest」のSendメソッドを使用		–
–▼条件分岐：Jsonファイルの読み込みが完了したか判定
｜【readyStateプロパティが4、かつ、statusプロパティが200】
｜Jsonファイルの内容を取得する。
▲		–

「XMLHttpRequest」の「Open」メソッドおよび「Send」メソッドを実行しても、Jsonファイルの読み込みが完了していない。
Jsonファイルの読込が完了したか判定を行うために、「readyState」プロパティおよび「status」プロパティを使用する。

「readyState」プロパティおよび「status」プロパティについては、以下の「参考」情報を参照。

・参考：「readyState」プロパティ

番号内容
0Openが呼び出されていない状態。
1openが呼び出された状態。
2Sendが呼び出され、ヘッダを受信した状態。
3ダウンロード中の状態。
4ダウンロードが完了した状態。

・参考：「status」プロパティ

番号内容
0通信が発生していない状態。
200正常に受信が完了した状態。
404ファイルが見つからなかった状態。
500内部エラーが発生した状態。

▼表作成処理

入力処理内容出力
–ヘッダ名を配列にセットする。
項目：「ID」、「部署名」		–
–HTMLの＜table＞要素を作成する。–
–＜table＞の種類を設定する。
border：2		–
–HTMLの＜tbody＞要素を作成する。–
–HTMLの＜tr＞要素（ヘッダ部用）を作成する。–
–■ループ処理：2回繰り返し
｜HTMLの＜th＞要素を作成する。
｜ヘッダ名配列から、表のヘッダを設定する。
｜＜th＞要素を＜tr＞要素に格納する。
■		–
–HTMLの表を改行する。–
–■ループ処理：Jsonファイルの件数分繰り返し
｜HTMLの＜tr＞要素（データ部用）を作成する。
｜■ループ処理：2回繰り返し
｜｜HTMLの＜td＞要素を作成する。
｜｜▼条件分岐：ループの回数
｜｜｜【1回目の場合】
｜｜｜JsonデータのIDを表にセットする。
｜｜―――――
｜｜｜【2回目の場合】
｜｜｜Jsonデータの部署名を表にセットする。
｜｜▲
｜｜＜td＞要素を＜tr＞要素に格納する。
｜HTMLの表を改行する。
■		–
–＜tbody＞要素を<table>要素に格納する。–
–＜table＞要素を＜div＞要素（ID指定）に格納する。【HTML】
表（コード,部署名）

・JavaScriptでの表作成のイメージ

JavaScriptでの表作成のイメージ図を以下に示す。

■Jsonファイルレイアウト

以下にJsonファイルのレイアウトを示す。
今回は、「ID」、「部署名」とする。

[{
    "ID":"1001",
    "Name":"経理部"
},
{
    "ID":"1002",
    "Name":"開発部"
},
{
    "ID":"1003",
    "Name":"営業部"
},
{
    "ID":"1004",
    "Name":"事務部"
}]

■サンプルコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jsonファイル読込</title>
</head>
<body>
    <!-- 表を表示するdiv要素 -->
    <div id="table_data"></div>

    <!-- JavaScriptを実装 -->
    <script>



        // Jsonファイルを非同期で読み込む処理
        function getJsonData(){

            return new Promise(function(resolve){
                // jsonファイル名をセット
                const json_file = './department.json'

                // XMLオブジェクトをインスタンス
                let xhr = new XMLHttpRequest();

                // jsonファイルを開く
                xhr.open('GET', json_file, true);

                // jsonファイルの読み込み
                xhr.send();

                // 読み込みが完了したか判定
                xhr.onreadystatechange = () => {
                    if(xhr.readyState === 4 && xhr.status === 200){
                        let result = JSON.parse(xhr.responseText);
                        resolve(result);
                    }
                }
            })
        }

        getJsonData().then(function(json_data){
            // ヘッダー名の配列作成
            const th_data = ['ID', '部署名'];
            
            // table要素作成
            let tbl = document.createElement("table");

            // tableの種類を設定
            tbl.setAttribute("border", "2");

            // tbody要素作成
            let tbl_body = document.createElement("tbody");

            // tr要素作成
            let tbl_tr_header = document.createElement("tr");
            
            // ヘッダ作成
            for(let i = 0; i < 2; i++){
                // th要素作成
                let tbl_th = document.createElement("th");

                // ヘッダ名をセット
                tbl_th.textContent = th_data[i];

                // th要素をtr要素に格納
                tbl_tr_header.appendChild(tbl_th);
            }

            // 表を改行
            tbl_body.appendChild(tbl_tr_header);

            // Jsonデータをtableに格納
            for(let j = 0; j < json_data.length; j++){

                // tr要素作成
                let tbl_tr_data = document.createElement("tr");

                for(let k = 0; k < 2; k++){
                    // td要素作成
                    let tbl_td = document.createElement("td");

                    // 1回目：ID、2回目：部署名
                    if(k === 0){
                        // jsonデータをセット(ID)
                        tbl_td.textContent = json_data[j].ID;

                    }else if(k === 1){
                        // jsonデータをセット(部署名)
                        tbl_td.textContent = json_data[j].Name;
                    }
                    // td要素をtr要素に格納
                    tbl_tr_data.appendChild(tbl_td);
                }

                // 表を改行
                tbl_body.appendChild(tbl_tr_data);
            }

            // tbody要素をtable要素に格納
            tbl.appendChild(tbl_body);

            // table要素をdiv要素に格納
            document.getElementById('table_data').appendChild(tbl);
        })
    </script>
</body>
</html>

■実行結果

タイトルとURLをコピーしました