如何显示我的数组中的所有对象，而不仅仅是 1 以及如何按顺序显示？ [关闭]

Posted 2023-02-14

【中文标题】如何显示我的数组中的所有对象，而不仅仅是 1 以及如何按顺序显示？ [关闭]

【英文标题】：How do I show all objects from my array and not just the 1 and also how do I do it in order? [closed]

【发布时间】：2022-01-07 11:02:54

【问题描述】：

如何显示我的数组中的所有对象，而不仅仅是 1 以及如何按顺序显示？它只显示 1 项，并且只显示最后一项。所以我列出了所有的对象，但它只给了我相同的项目，而且它也是从底部开始的。

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();

【问题讨论】：

您应该格式化该代码，使其不包含任何拼写错误或语法错误。您还应该使用编辑工具栏中的 sn-p 函数 [<>] 将 brandLogo 等的相关 HTML 添加为 minimal reproducible example。

现在您正在为每次迭代更新 innerHTML。您应该使用 appendChild developer.mozilla.org/en-US/docs/Web/API/Node/appendChild 之类的东西并在每次迭代中添加一个新项目，或者将完整的 html 存储在一个新变量中以在您的 forEach 循环之后打印它

【参考方案1】：

它只显示 1 项，并且只显示最后一项。所以我拥有所有 列出的对象，但它只给我相同的项目，它也 从底部开始。

您的问题是您循环遍历您的数组，但您 assign 而不是每次都累积...所以您绝对会得到最后一项。 所以解决方案是使用一个变量来累积你的objects，然后最后将它分配给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"/>

【讨论】：

所以您的建议有点用，但我无法在 stackover 流程​​中添加所有内容，是否有其他平台可以向您展示并可能从您那里获得一些额外的帮助？

如果我的答案有效，请将其视为已接受的答案，欢迎您提出另一个问题，不要显示所有内容，只需表明您的想法和您的尝试，绝对是您'会找到我或其他一些开发人员帮助你！快乐编码 ;)

【参考方案2】：

innerHTML = 将设置innerHtml，这意味着您将失去使用之前所拥有的内容 += 而是附加到现有的

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`;
   
   );