[英]Looping through Javascript Object and adding to HTML Div
我正在開發一款游戲,但遇到了一個我已經堅持了好幾個小時的問題。 我有一個 object,我想編寫一個循環,它將獲取此 object 中的所有值,並將它們粘貼到 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 Object
//asset name, asset age, asset cost
assets = {1: ["Boat", 0, "10000"], 2: ["Carriage", 0, "10000"]}
所以我非常想做的是 - 創建兩個 div,每個 div 都有來自每個鍵的信息。 我希望我是有道理的。 如果我沒有,請告訴我。 謝謝!
您可以使用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>
就個人而言,我會在你的 forEach function 中構建資產 html 而不是克隆占位符 html。 下面的代碼應該創建您正在尋找的結構。 祝你好運!
索引.html
<div id="all_asset"/>
play.js
const assets = {
1: ["Boat", 0, "10000"],
2: ["Carriage", 0, "10000"]
}
function assetsList() {
Object.keys(assets).forEach(key => {
// get current asset data
const assetData = assets[key];
// create asset container
const container = document.createElement("div");
// create and append asset header
const header = document.createElement('h1');
header.appendChild(document.createTextNode(assetData[0]))
// create and append first p
const p1 = document.createElement('p')
p1.appendChild(document.createTextNode(assetData[1]))
// crreate and append second p
const p2 = document.createElement('p')
p2.appendChild(document.createTextNode(assetData[2]))
// fill out the asset container
container.appendChild(header)
container.appendChild(p1)
container.appendChild(p2)
// append the whole thing to the parent
document.getElementById("all_asset").appendChild(container);
})
};
您可能需要考慮將資產表示重構為對象數組。 例如,
let assets = [
{
name: 'boat',
age: 0,
price: 10000,
},
{
name: 'carriage',
age: 0,
price: 10000,
},
];
按照您最初使用forEach
方法迭代資產的想法,您可以為每個資產動態插入一個 div。
assets.forEach(({ name, age, price }) => {
let touchBox = document.createElement('div');
touchBox.classList.add('touch_box', 'col-sm-12');
touchBox.id = 'asset_touchbox';
touchBox.style.height = '150px';
let nameElt = document.createElement('h5');
nameElt.id = 'asset_name';
nameElt.innerHTML = name;
let priceElt = document.createElement('p');
priceElt.id = 'asset_price';
priceElt.innerHTML = price;
let ageElt = document.createElement('p');
ageElt.id = 'asset_age';
ageElt.innerHTML = age;
touchBox.appendChild(nameElt);
touchBox.appendChild(priceElt);
touchBox.appendChild(ageElt);
document.querySelector('#list_box').appendChild(touchBox);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.