javascript オブジェクトの値を全てhtmlで表示する

作成日 2020.09.02
更新日 2022.06.14
javascript
javascript

javascriptでObject.keys(obj).forEachを使用して、オブジェクトの値を全てhtmlで表示するサンプルコードを記述してます。

1. 環境
2. Object.keys(obj).forEach使い方
3. サンプルコード

環境

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

Javascript サンプル集はこちら

Object.keys(obj).forEach使い方

Object.keys(obj).forEachを使うと、オブジェクトのkeyの値を全て取得することができます。
これを使用してすべて、htmlとして表示します。

Object.keys(obj).forEach(function(key){
  console.log(key + " : " + obj[key]);
});

Object.keys(obj).forEach使い方

let obj = {
      key1: 'java',
      key2: 'javascript',
      key3: 'vue.js',
      key4: 'react.js',
      key5: 'python'
    };


Object.keys(obj).forEach(function(key){
  console.log(key + " : " + obj[key]);
});

実行結果

これを、htmlとして表示させるには、以下のように「配列」と「innerHTML」を使用します。
※文字列はテンプレートリテラルを使用して結合してます。

${}(テンプレートリテラル)の使い方

<div id="main">
</div>

<script>

let obj = {
      key1: 'java',
      key2: 'javascript',
      key3: 'vue.js',
      key4: 'react.js',
      key5: 'python'
    };

let h = [];

Object.keys(obj).forEach(function(key){  
  h.push(`<p>${key}:${obj[key]}</p>`)
});

//innerHTMLを使用して表示    
document.getElementById('main').innerHTML = h.join('');

</script>

実行結果

また、javascript部は引数を1文字に変えて、document.getElementByIdを省略して記述すれば、少し短くコードを記述することもできます。関数もアロー関数を使用できます。

アロー関数の使い方

Object.keys(obj).forEach((k)=>{  
  h.push(`<p>${k}:${obj[k]}</p>`)
});
  
main.innerHTML = h.join('');

サンプルコード

以下は、「表示」ボタンをクリックすると、用意してあるオブジェクト内の値を全てliタグで表示するサンプルコードとなります。

※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"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
  }
</style>
<script>

  function hoge() {

    let obj = {
      key1: 'java',
      key2: 'javascript',
      key3: 'vue.js',
      key4: 'react.js',
      key5: 'python'
    };
    //表示する関数
    disp(obj, "txt");

  }

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

</script>

<body>
  <div class="main">

    <ul id="txt" class="list-group list-group-flush"></ul>

    <button type="button" class="btn btn-raised btn-primary" onclick="hoge()">表示</button>

  </div>
</body>

</html>

オブジェクトの値が表示されていることが確認できます。