显示页面上的对象数组

Question

我试图渲染对象是在一个数组到我的DOM。我试图显示每个对象在自己的卡查看(使用顺风css)。我对编码相当陌生，所以我觉得我在这里忽略了一些非常简单的东西。任何帮助将非常感激!

const productsDOM = document.querySelector(`.products`);
const itemObject = [{
title: "Chocolate",
price: 10.99,
id: 1,
img: "https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Whipped Cream",
price: 12.99,
id: 2,
img: "https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}, {
title: "White Frosting",
price: 12.99,
id: 3,
img: "https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Berry",
price: 14.99,
id: 4,
img: "https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Deluxe",
price: 19.99,
id: 5,
img: "https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Oreo",
price: 14.99,
id: 6,
img: "https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}];
function displayProducts() {
let html = ``;
itemObject.forEach(() => {
html += `
<div id="item-1" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${itemObject.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${itemObject.title}</h3>
<p class="text-right">$${itemObject.price}</p>
</div>
<button data-id=${itemObject.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}

Answer 1

可以使用for loop，甚至forEach()创建元素，它将是div,span,h1或其他无关紧要，并使用innerText将对象名称声明为文本，并在使用for循环之前调用DOM元素，并通过.appendChild

将它们作为子元素附加在元素中。在这种情况下，我使用模板字符串它更容易使用，当你必须从对象

中附加大量数据时<标题>

For循环

const container = document.querySelector(".container")
const data = [
{name: "george", age: 12},
{name: "Maria", age: 35},
{name: "Lucas", age: 65}
]
for(let i = 0; i < data.length; i++){
const usersBox = document.createElement("div")
usersBox.className = "usersBox"

const list = document.createElement("p")

list.innerText = `${data[i].name}: ${data[i].age}`
usersBox.appendChild(list)

container.appendChild(usersBox)
}

.usersBox{
display: flex;
border: 2px solid black
}

<div class="container">
</div>

<标题>

.forEach ()

const container = document.querySelector(".container")
const data = [
{name: "george", age: 12},
{name: "Maria", age: 35},
{name: "Lucas", age: 65}
]
data.forEach(users => {
const usersBox = document.createElement("div")
usersBox.className = "usersBox"

const list = document.createElement("p")

list.innerText = `${users.name}: ${users.age}`
usersBox.appendChild(list)

container.appendChild(usersBox)
})

.usersBox{
display: flex;
border: 2px solid black;
}

<div class="container">
</div>

Answer 2

你忘了" capture ";forEach函数中数组中的每个元素:

itemObject.forEach((item) => {

一旦完成，你可以在模板中使用item而不是itemObject。另外，ID必须是唯一的，这样您就可以捕获数组中当前项的索引，并在模板中使用它:

itemObject.forEach((item, index) => {

const productsDOM = document.querySelector(`.products`);
const itemObject = [{
title: "Chocolate",
price: 10.99,
id: 1,
img: "https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Whipped Cream",
price: 12.99,
id: 2,
img: "https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}, {
title: "White Frosting",
price: 12.99,
id: 3,
img: "https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Berry",
price: 14.99,
id: 4,
img: "https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Deluxe",
price: 19.99,
id: 5,
img: "https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Oreo",
price: 14.99,
id: 6,
img: "https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}];
function displayProducts() {
let html = ``;
itemObject.forEach((item,index) => {
html += `
<div id="item-${index}" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${item.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${item.title}</h3>
<p class="text-right">$${item.price}</p>
</div>
<button data-id=${item.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}
displayProducts();

<div class="products"></div>

Answer 3

如果你的forEach循环有问题，试试这个:

function displayProducts() {
let html = ``;
itemObject.forEach((el) => {
html += `
<div id="item-1" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${el.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${el.title}</h3>
<p class="text-right">$${el.price}</p>
</div>
<button data-id=${itemObject.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}