时间戳

首页 > 解决方案 > 无法在我的 javascript 文件中显示获取的数据

javascript - 无法在我的 javascript 文件中显示获取的数据

问题描述

我有一个 json 文件，我获取了数据。但是我无法在屏幕上显示它。如何显示？我在控制台中获得了数据结果，但是我无法访问产品名称、价格等参数。

我的代码如下

index.html

<body>
    <div id="products"></div>
    <script src="/index.js"></script>
</body> 


index.js

fetch("./data.json")
.then(response => {
   return response.json();
})
.then(data => console.log(data));


showProducts = products => {
    const showProductsDiv = document.querySelector("#products");
    products.map(product => {
      const productElement = document.createElement("p");
      productElement.innerText = `product Name: ${product.name}`;
      showProductsDiv.append(productElement);
    });
  }

我还分享控制台结果

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

标签： javascriptjsonfetch

解决方案

您需要使用您的showProducts功能。这是一个示例代码，也适用于您，但请记住，我使用了示例 api。这与你的有点不同，这就是为什么我有results数组和name.first.

const url = 'https://randomuser.me/api/?results=10';

fetch(url)
.then((resp) => resp.json())
.then(data => {
  return showProducts(data)
})

showProducts = products => {
  const showProductsDiv = document.querySelector("#products");
  products.results.map(product => {
  const productElement = document.createElement("p");
  productElement.innerText = `product Name: ${product.name.first}`;
  showProductsDiv.append(productElement);
 });
}

推荐阅读