jsonのデータを取得してhtmlに表示したい

前提

jsonに格納されている値を非同期処理でconsol.logで取得することはできた。次はこれをhtmlに表示したい。

実現したいこと

tableタグを使用した表を作成したい。タイトル以外のデータはjsonに格納されている値を取得して、テキストを表示したい。表示の仕方は横一列に並べ、上から下に向かって表示したい。

ID 名前　数値1 数値2 数値3 数値4
○ ○　　○　　○　　○ ○
× ×　　 × × × ×

上記のように表示したい。

発生している問題・エラーメッセージ

取得したデータを生成したtdタグに表示しようとしたら、[object Object]と表示されてしまう(下記で検討した)。

該当のソースコード

--html--
<div class="class">
      <div class="class__take">
        <img src="./画像パーツ/icon_mr.svg" alt="題名の画像" />
        <h1 class="class__take-progress">受講進捗</h1>
      </div>
      <div class="class__take-table">
        <table id="class__table">
          <tr>
            <th>ID</th>
            <th>MR名</th>
            <th>割当て</th>
            <th>完了</th>
            <th>未完了</th>
            <th>完了率</th>
          </tr>
          <tr id="allTr"></tr>
        </table>
      </div>
    </div>
--html--

--scss--
body {
  background-color: #f2f2f2;
}

.class {
  &__take {
    display: flex;
  }
}
--scss--

--js--
const progressData = '../json/progresslist.json';
  const table = document.getElementById('class_table');
  const border = document.getElementById('border');
  const tr = document.querySelector('tr');
  const td = document.createElement('td');

  function dataJson() {
    fetch(progressData)
      .then((response) => {
        // console.log(response);
        return response.json();
      })
      .then((json) => {
        // console.log(
        //   json.users.foreach((data) => {
        //     console.log(data);
        //   })
        // );
        const name = json.users[0];
        // console.log(name);

        const createTd = document.getElementById('allTr').appendChild(td);
        createTd.innerText = name;
      });
  }
  dataJson();
--js--

--json--
{
  "average": {
    "all": 95.3,
    "branch_office": 92.0,
    "sales_office": 88.9
  },
  "users": [
    {
      "user_id": "U000001", 
      "user_name": "松任谷 由美", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 94.6
    },
    {
      "user_id": "U000002", 
      "user_name": "大泉 洋", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 75.5
    },
    {
      "user_id": "U000003", 
      "user_name": "北島 三郎", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 58.0
    },
    {
      "user_id": "U000004", 
      "user_name": "中島 みゆき", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 35.5
    },
    {
      "user_id": "U000005", 
      "user_name": "窪田 正孝", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 18.8
    },
    {
      "user_id": "U000006", 
      "user_name": "ユーザー①", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 50.0
    },
    {
      "user_id": "U000007", 
      "user_name": "ユーザー②", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 50.0
    },
    {
      "user_id": "U000008", 
      "user_name": "ユーザー③", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 50.0
    }
  ]
}
--json--

試したこと

fetchを使用して、consolo.logでjsonデータの取得はできた。それを試しにallTrを取得した箇所にtdを追加して、そこにinnerTextで表示しようとしたら、[object Object]と表示された。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

javascript
1<script>
2window.addEventListener('DOMContentLoaded', async()=>{
3  const users=await fetch('sample.json').then(res=>res.json()).then(x=>x.users);
4  users.forEach(x=>{
5    const tr=`<tr>
6      <td>${x.user_id}</td>
7      <td>${x.user_name}</td>
8      <td>${x.allocation_size}</td>
9      <td>${x.completion_size}</td>
10      <td>${x.non_completion_size}</td>
11      <td>${x.completion_rate}</td>
12      </tr>`;
13    t1.insertAdjacentHTML('beforeend',tr);
14  });
15});
16</script>
17<table>
18<thead>
19<tr>
20<th>ID</th>
21<th>MR名</th>
22<th>割当て</th>
23<th>完了</th>
24<th>未完了</th>
25<th>完了率</th>
26</tr>
27</thead>
28<tbody id="t1">
29</tbody>
30</table>

投稿2022/06/01 00:24

編集2022/06/01 01:31

yambejp

総合スコア117678

nao__funky

2022/06/01 12:47

ご助言ありがとうございます。こちらのコードもとても勉強になりました。今回は参考にさせて頂き自力で実装できました。また、機会がありましたらこんな私ですが、ご助言宜しくお願い致します。

行動規範の内容に同意します

ベストアンサー

name が users 配列の中の1項目ですから、name 1つから <td> を6個作成してそれぞれに name.user_id name.user_name などを textContent としてセットする必要があります。また、users 配列の各項目で繰り返したいでしょうから、おおまかな構成は以下のようになるはずです。

js
1for (let name of json.users) {
2  // class__table に insertRow() で <tr> を1つ追加
3  // その <tr> に <td> を1つ追加
4  // その textContent に name.user_id をセット
5  // その <tr> に <td> を1つ追加
6  // その textContent に name.user_name をセット
7  ....
8}
9
10または
11
12for (let name of json.users) {
13  // class__table に insertRow() で <tr> を1つ追加
14  // その <tr> に <td>6個を入れて innerHTML をセット
15  tr.innerHTML = `<td>${name.user_id}<td>${name.user_name}<td>...`;
16}
17