theme:

JSONファイルをtableとして表示させる

summary:

JSONファイルをJavaScriptで読み込みtableとしてHTMLに出力

points:

・XMLHttpRequestでJSONファイル読み込み

・createElementでtable要素を生成

・appendChildでtable要素を出力

・JSONファイルは表形式で保存しておく

・テストはサーバを起動しlocalhost環境で行う

date:

2017-10-07

reference:

HTML専用のDOM（テーブルを作る）

http://titi-fe.hatenablog.com/entry/2016/02/15/152723

JavaScriptでのJSONのパーシング - JSONの読み込みと値の取得

https://www.ipentec.com/document/document.aspx?page=javascript-json-parsing

HTML:


<div id="id001"></div>
<script type="text/javascript" src="index.js"></script>

JSON:data.json


[
	{"aaa":"xxx1", "bbb":1, "ccc":100},
	{"aaa":"xxx2", "bbb":2, "ccc":200},
	{"aaa":"xxx3", "bbb":3, "ccc":300},
	{"aaa":"xxx4", "bbb":4, "ccc":400},
	{"aaa":"xxx5", "bbb":5, "ccc":500}
]

JavaScript:index.js


window.addEventListener("load", init);
function init()
{
	var request = new XMLHttpRequest();
	request.onreadystatechange = function ()
	{
		if((request.readyState == 4) && (request.status == 200))
		{
			var table = document.createElement('TABLE');
			var tbody = document.createElement('TBODY');
			table.appendChild(tbody);
			let dnRec = JSON.parse(request.responseText);
			for(let i=0; i<dnRec.length; i++)
			{
				let rec = dnRec[i];
				if(i == 0)
				{
					let tr = document.createElement('TR');
					for(let key in rec)
					{
						let th = document.createElement('TH');
						th.appendChild(document.createTextNode(key));
						tr.appendChild(th);
					}
					tbody.appendChild(tr);
				}
				
				let tr = document.createElement('TR');
				for(let key in rec)
				{
					let td = document.createElement('TD');
					td.appendChild(document.createTextNode(rec[key]));
					tr.appendChild(td);
				}
				tbody.appendChild(tr);
			}
			document.getElementById("id001").appendChild(table);
		}
	}
	request.open("GET", "data.json");
	request.send();
}

output: