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

参考

【javascript】オブジェクトの値を取得するObject.keys Object.values Object.entriesの使い方

HTML

  <table class="content-table">
    <thead>
      <tr>
        <th>No.</th>
        <th>段位</th>
        <th>名前</th>
        <th>年齢</th>
      </tr>
    </thead>
    <tbody id="playerList"></tbody>  <!-- ここに配列の中身を表示させる -->
  </table>

CSS

【CSS】テーブルを見やすくするデザイン（table design）

javascript

配列

  const players = [
    {
      No: "1",
      grade: "二冠",
      name: "藤井",
      age: 19,
    },
    {
      No: "2",
      grade: "竜王",
      name: "豊島",
      age: 31,
    },
    {
      No: "3",
      grade: "名人",
      name: "渡辺",
      age: 37,
    },
    {
      No: "4",
      grade: "王座",
      name: "永瀬",
      age: 28,
    },
    {
      No: "5",
      grade: "九段",
      name: "羽生",
      age: 50,
    },
    {
      No: "6",
      grade: "九段",
      name: "谷川",
      age: 59,
    },
    {
      No: "7",
      grade: "六段",
      name: "増田",
      age: 23,
    },
    {
      No: "8",
      grade: "五段",
      name: "藤森",
      age: 34,
    },
  ];

表を生成

  const playerList = document.getElementById("playerList");

  players.forEach((player) => {  // 配列の中のオブジェクトの数だけ処理を繰り返す
    const tr = document.createElement("tr");  
    playerList.appendChild(tr); // 表の中に８個の「tr」（行）ができる
    // 1行の中を生成
    const objArray = Object.entries(player);  // オブジェクトを配列に
    objArray.forEach((arr) => { // No, name, age, gradeの4回繰り返す
      const td = document.createElement("td");
      td.textContent = arr[1];  // arr[1]はvalueの部分
      tr.appendChild(td);
    });
  });

完成