外部のJSONデータをインポートしてHTMLで出力する方法
カテゴリ：WEB制作
タグ：
ウェブマーケティングを行っていると顧客データをCSVやJSONなどからホームページにデータを展開することがまれにあります。
今回は『外部のJSONデータをインポートしてHTMLで出力する方法』を紹介します。
コードを紹介
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>商品名</th>
<th>ディスプレイサイズ</th>
<th>高さ</th>
<th>横</th>
<th>厚み</th>
<th>重さ</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded', () => {
fetch('js_data.json')
.then(response => response.json())
.then(data => {
const tbody = document.querySelector('table tbody');
tbody.innerHTML = '';
data.forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.name}</td>
<td>${item.size}</td>
<td>${item.height}</td>
<td>${item.width}</td>
<td>${item.heavy}</td>
<td>${item.weight}</td>
`; tbody.appendChild(tr);
});
})
.catch(error => {
console.error('JSON読み込みエラー:', error);
});
});
</script>
</body>
</html>
コードを解説
HTML
ただのテーブルですが、tdタグにはテキストが入るため、空にしておきます。
<table border="1">
<thead>
<tr>
<th>商品名</th>
<th>ディスプレイサイズ</th>
<th>高さ</th>
<th>横</th>
<th>厚み</th>
<th>重さ</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Javascript
読み込みが完了したら実行します。
document.addEventListener('DOMContentLoaded', () => {
});
『fech(‘ファイル名’)』でデータを取得します。
この関数で非同期によってリクエストを送信することが可能です。
fetch('js_data.json')
『response.json()』 は、リクエストによって戻ってきたHTTPレスポンスを受け取り、そのレスポンスのJSONデータをJavaScriptのオブジェクトに変換するためのプロミスを返します。
データを取得が成功した場合、エラーがあった場合で処理を分けます。
取得できた場合は『then』の中に処理を書いていきます。
エラーはcatchの中に処理を書きます。
.then(response => response.json())
.then(data => {
})
.catch(error => {
});
成功した場合の処理を書いていきます。
出力先のタグであるtable tbodyを取得します。
const tbody = document.querySelector('table tbody');
tbody内の値を初期化します。
tbody.innerHTML = '';
ループを使って全ての表にデータを挿入していきます。
data.forEach(item => {
});
ループ内の処理を解説します。
『docement.ccreateElement』でtrタグを生成、jsonデータからそれぞれのデータを取得したtdタグを生成します。
『○○.appendChild(○○)』でHTMLを出力します。
data.forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.name}</td>
<td>${item.size}</td>
<td>${item.height}</td>
<td>${item.width}</td>
<td>${item.heavy}</td>
<td>${item.weight}</td>
`;
tbody.appendChild(tr);
});
最後に『.catch』内にエラーがあった場合の処理を書いていきます。
console.error('JSON読み込みエラー:', error);
まとめ
以上、『外部のJSONデータをインポートしてHTMLで出力する方法』でした。
