如何将API获取的JSON数据解析到新建的<div>元素中？

你的代码主要有三个问题，导致数据无法正确显示在div里：

1. async函数的返回值是Promise对象
   getStockData是异步函数，调用它会返回一个Promise，而不是直接返回API的数据。你直接把getStockData()赋值给data，得到的是Promise对象，不是实际的JSON数据。

2. getStockData没有返回数据
   函数内部只打印了数据，但没有用return把数据返回出去，所以就算处理Promise也拿不到结果。

3. 直接给textContent赋值对象会显示[object Object]
   JSON是对象类型，直接赋值给textContent会显示对象的默认字符串形式，需要转成可读的字符串或者提取具体字段。

修复后的代码 #

首先修改getStockData，让它返回获取到的JSON数据：

async function getStockData() {
  const response = await fetch(api_url);
  const data = await response.json();
  console.log(data);
  return data; // 返回数据供外部使用
}

然后修改addStockWidget，用await等待异步函数完成，拿到实际数据：

async function addStockWidget() {
  // 等待Promise完成，获取真实数据
  const data = await getStockData();
  
  const boxEle = document.createElement('div');
  const container = document.querySelector('.stockcontent');
  
  // 样式可以保留，或者推荐用CSS类管理（更易维护）
  boxEle.style.width = '70%';
  boxEle.style.height = '50px';
  boxEle.style.border = '1px solid black';
  boxEle.style.margin = '15px 0 0 15px';
  
  // 两种展示方式选一种：
  // 方式1：转成格式化的JSON字符串，方便调试查看完整数据
  boxEle.textContent = JSON.stringify(data, null, 2);
  
  // 方式2：提取具体字段展示（示例，根据你的API返回结构修改）
  // boxEle.textContent = `股票名称：${data.symbol}，当前价格：${data.price}`;
  
  container.appendChild(boxEle);
}

额外注意事项 #

• 调用addStockWidget时，因为它是异步函数，建议在页面DOM加载完成后调用：

window.addEventListener('DOMContentLoaded', () => {
  addStockWidget();
});

• 推荐把样式写到CSS类中，比如定义：

.stock-box {
  width: 70%;
  height: 50px;
  border: 1px solid black;
  margin: 15px 0 0 15px;
}

然后在JS里用boxEle.classList.add('stock-box')代替 inline style，代码更整洁。

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