时间戳

首页 > 解决方案 > 循环遍历 Javascript 对象并添加到 HTML Div

javascript - 循环遍历 Javascript 对象并添加到 HTML Div

问题描述

我正在开发一款游戏，但遇到了一个我已经坚持了好几个小时的问题。我有一个对象，我想编写一个循环，它将获取该对象中的所有值，并将它们粘贴到一个 html div 中。我这样做的方式是，我采用了一个 div，我正在克隆它并为所有子元素赋予新值。然后我想使用 DOM 操作将一个键中的值插入到一个带有标题和两个段落的 div 中。这是代码。

索引.html

<div id = "all_asset" style = "display: none;">
    <div class = "touch_box col-sm-12" style = "height: 150px; display: none;" id = "asset_touchbox">
        <br><h id = "asset_name"></h>
        <p1 id = "asset_price"></p1><hr>
        <p id = "asset_age"></p><hr>
    </div>    
</div>

play.js

function assetsList(){
    Object.keys(assets).forEach(key => {
        for (var i = 1; i < Object.keys(assets).length; i++){
    
            //duplicate box
            var list_box = document.getElementById("asset_touchbox");
            var clone_box = list_box.cloneNode(true);
            clone_box.id = "list_assets" + String(i);
            document.getElementById("all_asset").appendChild(clone_box);

            //get id of child elements
            clone_box.getElementsByTagName('h')[0].id = "asset_name" + String(i);
            clone_box.getElementsByTagName('p1')[0].id = "asset_price" + String(i);
            clone_box.getElementsByTagName('p')[0].id = "asset_age" + String(i);
            list_box.parentNode.appendChild(clone_box);
            //show box
            clone_box.style.display = "block";

            var asset_name = assets[key][0];
            var asset_age = assets[key][1];
            var asset_price = assets[key][2];

            document.getElementById("asset_name" + String(i)).innerHTML = asset_name;
            document.getElementById("asset_price" + String(i)).innerHTML = asset_age;
            document.getElementById("asset_age" + String(i)).innerHTML = asset_price;
        }
      });      
}

Javascript 对象

//asset name, asset age, asset cost
assets = {1: ["Boat", 0, "10000"], 2: ["Carriage", 0, "10000"]}

所以我非常想做的是 - 创建两个 div，每个 div 都有来自每个键的信息。我希望我是有道理的。如果我没有，请告诉我。谢谢！

标签： javascripthtmlloopsdomjavascript-objects

解决方案

您可以使用class来简化代码。

这是一个例子：

// The original object given by you
const givenAssets = {
  1: ['Boat', 0, '10000'],
  2: ['Carriage', 2, '30000']
};

// Get #all_asset
const assetContainer = document.querySelector('#all_asset');

// Define a class
class Asset {
  // Set parameters
  constructor(id, name, price, age) {
    this.id = id;
    this.name = name;
    this.price = price;
    this.age = age;
  }

  // Create HTML
  addHtml() {
    // HTML elements as string
    let html = `
      <div class="touch_box col-sm-12" id="list_asset${this.id}">
        <br>
        <h4 id="asset_name${this.id}">${this.name}</h4>
        <p id="asset_price${this.id}">${this.price}</p>
        <hr>
        <p id="asset_age${this.id}">${this.age}</p>
        <hr>
      </div>`;
      
    // Add HTML element before the end of #all_asset
    assetContainer.insertAdjacentHTML('beforeend', html);
  }
}

// Make instances and put them into an array
let assets = [];
for (const key in givenAssets) {
  assets.push(new Asset(key, givenAssets[key][0], givenAssets[key][1], givenAssets[key][2]))
}

// Execute .addHtml() on each asset one by one.
assets.forEach(asset => asset.addHtml());
<div id="all_asset"></div>

推荐阅读