javascript for ofを使って配列をフロントに表示する

作成日 2020.09.27
更新日 2022.06.30
javascript
javascript

javascriptで、for ofを使用して、配列内の全てのデータを抽出してフロントに表示するするサンプルコードを記述してます。

1. 環境
2. for of使い方
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

for of使い方

for ofを使用すると、配列内の全てのデータを抽出することが可能です。

const arr = ['a', 'b', 'c'];
 
for (let item of arr) {
   console.log(item); // a b c
}

二次元配列の場合は、配列単位で取得されます。

const arr = [['a', 'b', 'c'],['d', 'e', 'f']];
 
for (let item of arr) {
   console.log(item);
}

実行結果

オブジェクトにも使用するができ、値を取得することが可能です。

const obj = { key1: 'value1', key2: 'value2' }
 
for (let item of Object.keys(obj)) {
    console.log( obj[item] );
}

サンプルコード

以下は、
「表示」ボタンをクリックすると、ランダムに生成した5個の配列を「for-of」で抽出して表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>
<script>

  function hoge() {
    // ランダムな配列を5個作成
    let arr = radarr(5);
    // 表示
    disp(arr, "txt");

  }

  //フロントに表示する関数
  function disp(arr, id) {
    let text = [];
    // for オブを使用
    for (let item of arr) {
      text.push('<li class="list-group-item">' + item + '</li>');
    }
    //innerHTMLを使用して表示    
    document.getElementById(id).innerHTML = text.join('');
  }

  function radarr(len) {

    //ランダムな9までの配列を生成
    let arr = [];
    let num = 10;
    let length = len;
    for (let i = 0; i < length; i++) {
      arr.push(Math.floor(Math.random() * num));
    }

    return arr;

  }

  window.onload = function () {
    // ボタンを取得
    let elmbtn = document.getElementById('btn');
    // クリックイベントを登録
    elmbtn.onclick = function () {
      hoge();
    };
  }

</script>

<body>
  <div class="main">
    
    <h2><span class="badge badge-success">一覧表示</span></h2>
    <ul id="txt" class="list-group"></ul>

    <button id="btn" type="button" class="btn btn-raised btn-danger">
      表示
    </button>

  </div>
</body>

</html>

配列のデータを全て抽出して表示していることが確認できます。

また、javascript部は、関数をアロー化したり、document.getElementByIdを省略したり、ランダムな配列をmapとfillで作成してコードを簡略化することが可能です。

アロー関数の使い方

const hoge = () =>{
  // ランダムな配列を5個作成
  let arr = Array(5).fill().map(x => ~~(Math.random()*10));
  // 表示
  disp(arr, "txt");

}

//フロントに表示する関数
const disp = (arr, id) =>{
  let text = [];
  // for オブを使用
  for (let item of arr) {
    text.push('<li class="list-group-item">' + item + '</li>');
  }
  //innerHTMLを使用して表示    
  document.getElementById(id).innerHTML = text.join('');
}

window.onload = () => {
  // クリックイベントを登録
  btn.onclick = () =>{
    hoge();
  };
}