JavaScriptオブジェクトをHTML要素として表示する方法

このチュートリアルでは、JavaScriptオブジェクトのリストをHTML要素のリストとしてWebページに表示する方法を学習します。

JavaScriptオブジェクトのリストがあり、それらをWebブラウザーでHTML要素として出力する必要があるとします。この例では、JavaScriptオブジェクトリテラルで表される演習のリストがあります。

JavaScriptオブジェクトリテラル：

let exerciseList = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

上記は、4つのオブジェクト（演習）を持つJavaScriptオブジェクトリテラル配列です。これらのオブジェクトを取得して、次のようにブラウザにリストとして表示します。

• デッドリフト
• プルアップ
• 腕立て伏せ
• スクワット

これは順序付けられていないリストです。上記のリストをChromeDevToolsで調べると、上記のリストのHTMLマークアップは次のようになります。

<ul>
  <li>Deadlift</li>
  <li>Pull-up</li>
  <li>Push-up</li>
  <li>Squat</li>
</ul>

JavaScriptオブジェクトのリテラル配列をHTML要素として表示する

次の4つの手順を実行する必要があります。

1. HTMLを使用して空の順序付けされていないリスト要素を作成し、その中に演習リスト項目を追加できるようにします。
2. forを使用して、JavaScriptオブジェクトのリテラル配列からすべての演習を見つけて取得します。 ループ。
3. 個々のエクササイズオブジェクトをリストアイテム内にラップします（<li></li> ）タグ。
4. ブラウザの順序付けされていないリスト要素内にリストアイテムのHTML要素を出力します（<ul></ul> ）手順1で作成しました。

1。空の順序なしリスト要素を作成します

HTMLで空の順序なしリスト要素を設定するには、index.html（またはCodePenなどを使用している場合はHTMLウィンドウ）内に以下を追加します。

<ul class="exercise-list"></ul>

次に、その順序付けされていないリストへの参照を変数に割り当てて、後で順序付けされていないリストに追加できるようにします。スクリプトファイルの先頭に次のコードを追加します。

let exerciseList = document.querySelector(".exercise-list");

2。エクササイズオブジェクトをループする

配列内の個々のエクササイズオブジェクトを処理しているため、それらを使用して何かを行う前に、各エクササイズをループ（反復）する必要があります。

JSオブジェクトのすぐ下に次のコードを追加します。

for (let exercise of exerciseList) {
  console.log(exercise.name);
}

スクリプトファイル全体は次のようになります：

let exerciseList = document.querySelector(".exercise-list");

let exerciseObjects = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

for (exercise of exerciseObjects) {
  console.log(exercise.name);
}

ブラウザコンソールを確認すると、次のように表示されます。

これで、個々のエクササイズオブジェクトにアクセスできます。

3。各演習をHTMLリストアイテム要素内にラップする

次に、収集した演習アイテムをリストアイテムタグ内にラップします。

まず、forループが始まる直前に次の変数を追加します。

let exerciseItems = "";

ループ内に、これを追加します：

exerciseItems += "<li>" + exercise.name + "</li>";

ここで、console.log(exerciseItems) （ループの外側と下）コンソールは、リストアイテム要素内にラップされた各エクササイズアイテムを出力します。

4。演習リスト内に演習項目を追加します

最後に、エクササイズリスト要素内にエクササイズアイテムを表示するには、forループのすぐ下に次のコードを追加します。

exerciseList.innerHTML = exerciseItems;

すべてが正しく行われた場合、順序付けされていない演習リストには、ブラウザウィンドウ内にすべての演習項目が表示されます。

参考として作成したすべてのコードは次のとおりです。

(function() {
  let exerciseList = document.querySelector(".exercise-list");

  let exerciseObjects = [
    {
      name: "Deadlift",
    },
    {
      name: "Push-up",
    },
    {
      name: "Pull-up",
    },
    {
      name: "Squat",
    },
  ];

  let exerciseItems = "";

  for (exercise of exerciseObjects) {
    exerciseItems += "<li>" + exercise.name + "</li>";
  }

  exerciseList.innerHTML = exerciseItems;
})();

これが、すべての機能するコードを含むCodePenです。