Javascript 如何使用map（）创建HTML模板？

我正在玩电子商务应用程序。我有API调用，API调用返回如下数据，我想使用

map

函数将

products

中的所有图像绘制为HTML，现在它返回单个生成的元素，我做错了什么？提前谢谢

var结果={
采购：[{
产品：[{
产品编号：264772179145，
名称：“Acer Chromebook 315 15.6”，
图像\u url:“https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？设置\u id=88000500F“
},
{
产品编号：264772179145，
名称：“Acer Chromebook 315 15.6”，
图像\u url:“https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？设置\u id=88000500F“
},
],
时间戳：1618215999，
金额：73457
},
{
产品：[{
产品编号：264772179145，
名称：“Acer Chromebook 315 15.6”，
图像\u url:“https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？设置\u id=88000500F“
}],
时间戳：1618216092，
金额：73457
},
{
产品：[{
产品编号：154061997658，
名称：“阿迪达斯轮式团队包男式”，
图像\u url:“https://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JYAAAOSwwRZf9n2L/$\u 1.JPG？设置\u id=88000500F“
}],
时间戳：1618217956，
金额：34566
}
],
};
函数getProducts（）{
var-res；
var采购=结果.采购.映射（采购=>{
var x=购买量。金额；
res=purchases.products.map（el=>{
返回`
${x}
`
})
})
document.getElementById（“TransactionBox”）.innerHTML=res.join（“”）
}

追加

尝试用括号括住返回语句。我用React Native编程，如果返回有多行，则需要用括号括起来

res = purchases.products.map(el => {
        return (`<div class="all-img"><img style="height:50px"; width:50px; src="${el.image_url}">
                   <div class="amount">${x}</div>
                 </div>`)
    })

res=purchases.products.map（el=>{
返回(`
${x}
`)
})

我缩短了函数，因此您不必使用

return

关键字和额外变量

var Result={“购买”：[{“产品”：[{“产品id”：264772179145，“名称”：“Acer Chromebook 315 15.6”，“图像url”：”https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG？set_id=88000500f“}，{“产品id”：264772179145，“名称”：“Acer Chromebook 315 15.6”，“图像url”："https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG？set_id=88000500f“}，{“产品id”：264772179145，“名称”：“Acer Chromebook 315 15.6”，“图像url”：”https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG？set_id=88000500f“}，{“产品id”：264772179145，“名称”：“Acer Chromebook 315 15.6”，“图像url”：”https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？set\u id=88000500f“}]，“时间戳”：1618215999，“金额”：73457}，{“产品”：[{“产品id”：264772179145，“名称”：“Acer Chromebook 315 15.6”，“图像”\u url:“https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？set\u id=88000500f“}]，“时间戳”：1618216092，“金额”：73457}，{”产品“：[{“产品id”：154061997658，“名称”：“阿迪达斯轮式团队包男式”，“图片url”：”https://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JYAAAOSwwRZf9n2L/$\u 1.JPG？set\u id=88000500f“}]，“时间戳”：1618217956，“金额”：34566}]；
函数getProducts（）{
constpurchases=Result.purchases.map（purchase=>purchase.products.map（el=>`${purchase.amount}'）.join（“”））；
document.getElementById（“TransactionBox”）.innerHTML=purchases.join（“”）；
}
document.querySelector（'button'）。addEventListener（'click'，getProducts）；

追加

您可以在这里改进两件事：

您可以嵌套

map

函数，以确保渲染整个集合

style=“高度：50px”；宽度：50px；

=>

style=“高度：50px；宽度：50px；“

var结果={
采购：[
{
产品：[
{
产品编号：264772179145，
名称：“Acer Chromebook 315 15.6”，
图像\u url:'https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？集合\u id=88000500f'，
},
{
产品编号：264772179145，
名称：“Acer Chromebook 315 15.6”，
图像\u url:'https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？集合\u id=88000500f'，
},
],
时间戳：1618215999，
金额：73457，
},
{
产品：[
{
产品编号：264772179145，
名称：“Acer Chromebook 315 15.6”，
图像\u url:'https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$\u 1.JPG？集合\u id=88000500f'，
}],
时间戳：1618216092，
金额：73457，
},
{
产品：[
{
产品编号：154061997658，
名称：“阿迪达斯轮式团队包男式”，
图像\u url:'https://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JYAAAOSwwRZf9n2L/$\u 1.JPG？集合\u id=88000500f'，
}],
时间戳：1618217956，
金额：34566，
},
],
};
函数getProducts（）{
var res=结果购买量
.map（（购买）=>{
退换货
.map（（产品）=>{
返回(`
${purchases.amount}
`)
})
.加入（“”）
})
.加入（“”）；
document.getElementById（'TransactionBox'）。innerHTML=res；
}

append

这不是

.map（）

应该使用的方式：

结果.purchases.map（purchases=>{…}）

。回调不会返回任何内容。这也只会在

结果.purchases中只有一个元素时起作用（您的实际问题）。替换
.map（）