1. ホーム
2. パソコン
3. javascript

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

投稿日 : 2022年05月14日 更新日 :

jsonファイルを準備

// test.json
[
    {
        "name": "tanaka",
        "age": "28",
        "phone": "090-0123-4567"
    },
    {
        "name": "sato",
        "age": "25",
        "phone": ["080-0987-7654", "090-3456-7890"]
    }
]

参考

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 を使って取得する

function getMembers() {
  fetch("http://localhost/・・・/test.json") // jsonファイルの場所
    .then((response) => {
    return response.json();
    })
    .then((members) =>{
      console.log(members);
  })
}

取得したものを表に書き出す

展開

<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】連想配列をテーブルできれいに表示する方法

まとめ