【javascript】filter関数で配列の中から必要な情報を抽出し、表（table）に表示する。

もともとの表

No.	段位	名前	年齢

参考

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

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

表を生成する関数

  //  第一引数はHTMLを生成する要素
  //  第二引数は配列
  function table(table, array) {
    array.forEach((player) => { //  配列内のオブジェクトの数だけループ（行）
      const tr = document.createElement("tr");
      table.appendChild(tr);
      const keyArray = Object.entries(player);
      keyArray.forEach((key) => {   //  配列内のkeyの数だけループ（各行の中身）
        const td = document.createElement("td");
        td.textContent = key[1];
        tr.appendChild(td);
      });
    });
  }

20歳以上35歳以下

  const filterData2 = shogiPlayers.filter((menber) => {
    return menber.age >=20 && menber.age<=35;
  });
  table(playerList2, filterData2);

No.	段位	名前	年齢

名前に「藤」が含まれる

  const filterData3 = shogiPlayers.filter((menber) => {
    return menber.name.includes('藤')  ;
  });
  table(playerList3, filterData3);

No.	段位	名前	年齢

奇数番号

  const filterData4 = shogiPlayers.filter((menber, index) => {
    return index % 2 === 0 ;
  }); 
  table(playerList4, filterData4);

No.	段位	名前	年齢

リストの最後

  const filterData5 = shogiPlayers.filter((menber, index, array) => {
    return array.length === index + 1;
  });
  table(playerList5, filterData5);

No.	段位	名前	年齢

「九段」のみ

  const filterData6 = shogiPlayers.filter((menber) => {
    return menber.grade.match('九段')  ;
  });
  table(playerList6, filterData6);

No.	段位	名前	年齢