JavaScriptでJSONデータを読み込み・HTMLへ出力する方法

JavaScriptを使ってJSONデータを読み込み。
HTMLに出力したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
JSONデータサンプル
[
{
"name": "佐藤",
"school_year": 1,
"test": {
"japanese": 30,
"english": 60
}
},
{
"name": "鈴木",
"school_year": 2,
"test": {
"japanese": 40,
"english": 70
}
},
{
"name": "田中",
"school_year": 3,
"test": {
"japanese": 50,
"english": 80
}
}
]
本記事で扱うjsonデータサンプルです。
上記をJavaScriptを使って読み込みします。
JSONデータを読み込むJavaScriptコード
// XMLHttpRequestを使ってjsonデータを読み込む
let requestURL = 'data.json';//jsonへのパス
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
// JSONデータをJavaScriptオブジェクトに変換
request.onload = function () {
let data = request.response;
data = JSON.parse(JSON.stringify(data));
dataArray(data);
}
// foreachでJSONデータをHTMLに出力
function dataArray(els) {
// JSONデータを出力したいHTML要素を指定
let array = document.querySelector('.array');
els.forEach(el => {
let name = el.name;
let school_year = el.school_year;
let japanese = el.test.japanese;
let english = el.test.english;
let code = '<ul>'+
'<li>名前:' + name + '</li>'+
'<li>学年:' + school_year + '年</li>'+
'<li>国語:' + japanese + '点</li>'+
'<li>英語:' + english + '点</li>'+
'</ul>';
array.insertAdjacentHTML('beforeend',code);
});
}
JSONデータを読み込むJavaScriptコード例です。
まず最初に、XMLHttpRequestを使ってJSONデータを実装環境に読み込ます。
requestURL変数にJSONデータへのパスを入れてください。
次にJSON.parse()を使い、JSONデータをJavaScriptオブジェクト形式に変換します。
これでJavaScriptでJSONデータを扱えるようになりました。
配列と同じくforEach等を使い、データをループで取り出します。
取り出したデータをHTMLタグ内に格納。
insertAdjacentHTMLで指定したHTML要素の中に出力します。
以上でJSONデータの読み込み・HTMLヘの出力が完了です。
まとめ
JavaScriptでJSONデータを読み込み・HTMLへ出力する方法について紹介しました。
以上で解説を終わります。
目次