▲TOPへ戻る

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

疑似要素

もともとの表

No. 段位 名前 年齢

参考

js
【javascript】連想配列をテーブルできれいに表示する方法
css
【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. 段位 名前 年齢

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

profile

gaoさん

パソコン好きなガオ

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