使用async/await获取JSON数据时点击按钮显示[object object]求助

核心原因 #

你看到的[object Object]是因为：

• 你的prodotti.json返回的大概率是对象数组（比如[{name: "商品A"}, {name: "商品B"}]），而你直接访问data.name——数组本身没有name属性，最终会把undefined或整个对象转成字符串显示；
• 提前创建的newDiv会被重复添加到容器，导致渲染异常。

解决方案1：渲染数组中的每个元素（如果JSON是对象数组） #

修改代码，遍历数组并逐个渲染name字段：

<script>
  async function fetchData() {
    const response = await fetch("./prodotti.json");
    return await response.json();
  }
  const container = document.querySelector(".container");
  const btn = document.querySelector("#get");
  
  btn.addEventListener("click", async () => {
    const data = await fetchData();
    // 清空容器，避免重复渲染
    container.innerHTML = '';
    
    if (Array.isArray(data)) {
      // 遍历数组，创建新元素渲染每个item的name
      data.forEach(item => {
        const itemDiv = document.createElement("div");
        itemDiv.textContent = item.name;
        container.appendChild(itemDiv);
      });
    } else {
      // 如果是单个对象，直接渲染name
      const itemDiv = document.createElement("div");
      itemDiv.textContent = data.name;
      container.appendChild(itemDiv);
    }
  });
</script>

解决方案2：直接显示完整JSON结构（调试用） #

如果只是想查看返回的JSON内容，可以用JSON.stringify()把对象转成格式化的字符串：

<script>
  async function fetchData() {
    const response = await fetch("./prodotti.json");
    return await response.json();
  }
  const container = document.querySelector(".container");
  const btn = document.querySelector("#get");
  
  btn.addEventListener("click", async () => {
    const data = await fetchData();
    // 用<pre>标签保留格式化的缩进
    container.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
  });
</script>

内容的提问来源于stack exchange，提问作者simos