| 名前 | 年齢 | 電話番号 |
|---|
ローカル環境でjsonデータを取得し、テーブル（table）に書き出す方法
jsonファイルを準備
以下のようなjsonファイルを作成しておきます。
// test.json
[
{
"name": "tanaka",
"age": "28",
"phone": "090-0123-4567"
},
{
"name": "sato",
"age": "25",
"phone": ["080-0987-7654", "090-3456-7890"]
}
]jsonファイルを受け取るには、サーバー上でやり取りする必要があります。 XAMPPでローカルサーバーを立ち上げ、HTMLファイルを開きます。
参考
XAMPPでPHPのローカル環境を整える
async await を使って取得する
async function getMembers() {
const response = await fetch(
"http://localhost/・・・/test.json" // jsonファイルの場所
);
const members = await response.json();
console.log(members);
return members;
}結果
then を使って取得する
以下はthenを使った書き方で、取得できるものは上と同じです。
function getMembers() {
fetch("http://localhost/・・・/test.json") // jsonファイルの場所
.then((response) => {
return response.json();
})
.then((members) =>{
console.log(members);
})
}async awaitは、then よりも、新しい書き方です。
取得したものを表に書き出す
<table>
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>電話番号</th>
</tr>
</thead>
<tbody id="memberList"></tbody> // ここにHTMLを生成
</table>
<script>
const memberList = document.getElementById("memberList");
// jsonファイルから情報を取得
async function getMembers() {
const response = await fetch(
"http://localhost/・・・/test.json"
);
const members = await response.json();
return members;
}
// リストアップするmember
async function listMembers(){
const members = await getMembers();
members.forEach(addList);
}
// リストに追加
function addList(member){
const tr = document.createElement("tr");
memberList.appendChild(tr);
const objArray = Object.entries(member);
objArray.forEach((key) => {
const td = document.createElement("td");
td.textContent = key[1];
tr.appendChild(td);
});
}
window.addEventListener("load", listMembers);
</script>テーブルに書き出す方法は以下を参照してください。
【javascript】連想配列をテーブルできれいに表示する方法
まとめ
- async awaitと then の2つの方法がある。
- async awaitの書き方の方が新しい。
- response.json()でjson形式で取得できる。
