▲TOPへ戻る

ローカル環境でjsonデータを取得し、テーブル(table)に書き出す方法

json

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ファイルを開きます。

参考

js
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;
}

結果

json fetch

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>
名前 年齢 電話番号

テーブルに書き出す方法は以下を参照してください。

js
【javascript】連想配列をテーブルできれいに表示する方法

まとめ

  1. async awaitthen の2つの方法がある。
  2. async awaitの書き方の方が新しい。
  3. response.json()でjson形式で取得できる。

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇