时间戳

首页 > 解决方案 > JSON 数据未通过 innerHTML 显示

javascript - JSON 数据未通过 innerHTML 显示

问题描述

我正在尝试使用 vanilla Javascript 从我的 JSON 文件中获取数据并将其插入 HTML。但是我的代码一直显示变量名称而不是数据。

displayProducts(products){
let result = "";
products.forEach(product => {
  result +="<article class='product'><div class='img-container'><img src=${product.image} alt='oops' class='product-img'><button class='bag-btn' data-id=${product.id}><img src='./images/poopbag.png'>Add to bag</button></div><h3>${product.title}</h3><h4>$${product.price}</h4></article>";
});
productsDOM.innerHTML=result;

}

显示的是 ${product.image} 、 ${product.id} 和 ${product.title}。不是实际数据。当我将 console.log(product.image)、console.log(product.id) 和 console.log(product.title) 放在同一个函数中时，它会显示我想要的数据。

标签： javascripthtml

解决方案

字符串插值要求您使用反引号`而不是单引号'或双引号"。

`<article class='product'><div class='img-container'><img src=${product.image} alt='oops' class='product-img'><button class='bag-btn' data-id=${product.id}><img src='./images/poopbag.png'>Add to bag</button></div><h3>${product.title}</h3><h4>$${product.price}</h4></article>`

推荐阅读