名前 | 年齢 | 電話番号 |
---|
ローカル環境で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ファイルを開きます。
参考

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>
テーブルに書き出す方法は以下を参照してください。

まとめ
- async awaitと then の2つの方法がある。
- async awaitの書き方の方が新しい。
- response.json()でjson形式で取得できる。
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク