How do I show all objects from my array and not just the 1 and also how do I do it in order? It's only showing 1 item and only the last item. So I have all of the objects listed but it is only giving me the same item and its also starting from the bottom.
let stoves = [
{
id: 1,
brand: "Frigidaire",
modelNumber: "FCRC3012AW",
description: "30\" Electric Coil Top Range ",
color: "White",
price: "$450.00",
qty: "",
},
{
id: 2,
brand: "Frigidaire",
modelNumber: "FFEF3016VB",
description: "30\" Electric Coil Top Range - Self Clean",
color: "Black",
price: "$465.00",
qty: "",
},
{
id: 3,
brand: "Frigidaire",
modelNumber: "FFEF3016VW",
description: "30\" Electric Coil Top Range - Self Clean",
color: "White",
price: "$465.00",
qty: "",
},
stoves.forEach((item) => {
brandLogo.src = 'imgs/brand-logos/frig.png';
productDesc.innerHTML = `${item.description} `;
modelNum.innerHTML = `<h5>Model Number:</h5>${item.modelNumber}`;
price.innerHTML = `${item.price}`;
});
}
applSection();
let appliances = stoves;
function init() {
appliances.forEach(applSection);
}
init();
innerHTML = will set innerHtml meaning you will lose what you had before using += instead it will be added to existing
stoves.forEach((item) => { brandLogo.src = 'imgs/brand-logos/frig.png'; productDesc.innerHTML += `${item.description} `; modelNum.innerHTML += `<h5>Model Number:</h5>${item.modelNumber}`; price.innerHTML += `${item.price}`; }); }It's only showing 1 item and only the last item. So I have all of the objects listed but it is only giving me the same item and its also starting from the bottom.
Your issue is that you loop over your array but you assign instead of accumelate each time... so absolutely you'll get the last item.
So solution is to use a variable to accumelate your objects then finally assign it to HTML
let stoves = [
{
id: 1,
brand: "Frigidaire",
modelNumber: "FCRC3012AW",
description: "30\" Electric Coil Top Range ",
color: "White",
price: "$450.00",
qty: "",
},
{
id: 2,
brand: "Frigidaire",
modelNumber: "FFEF3016VB",
description: "30\" Electric Coil Top Range - Self Clean",
color: "Black",
price: "$465.00",
qty: "",
}]
let productsHTML = "";
stoves.forEach((item) => {
const product = `<h5>Model Number: ${item.modelNumber}</h5>Description: ${item.description} <br/> Price: ${item.price} <hr/>`;
productsHTML += product;
});
productDesc.innerHTML = productsHTML;<div id="productDesc"/>