■作成するプログラムの概要
・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」プロパティ
| 番号 | 内容 |
|---|---|
| 0 | Openが呼び出されていない状態。 |
| 1 | openが呼び出された状態。 |
| 2 | Sendが呼び出され、ヘッダを受信した状態。 |
| 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>
コメント