如何将JS fetch返回的JSON数据展示到HTML页面元素中

1. 先在HTML中添加用来展示数据的元素 #

给需要展示数据的位置加一个带唯一id的标签，方便JS定位操作：

<!-- 可根据需求调整位置和样式 -->
<p>AVAX 对 USD 最新价格：<span id="avax-price">加载中...</span></p>

2. 修改原有JavaScript代码 #

把原本打印到控制台的逻辑，替换为给HTML元素赋值的逻辑即可，你要的价格数据在返回值的data.stats.priceAvaxUsd字段中。

修改后的完整代码如下：

async function getAVA() {
  // 先获取要操作的HTML元素
  const priceEl = document.getElementById('avax-price');
  try {
    const res = await fetch('https://graphql.avascan.info', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: `
        query {
            stats {
                priceAvaxUsd
            }
        }`
      }),
    });
    const result = await res.json();
    // 把值写入页面元素，这里保留2位小数做格式化，不需要可以去掉toFixed
    const avaxPrice = result.data.stats.priceAvaxUsd;
    priceEl.textContent = avaxPrice.toFixed(2);
  } catch (err) {
    // 请求失败时展示提示
    priceEl.textContent = '加载失败';
    console.error('请求出错：', err);
  }
}

getAVA();

如果不想改原有的Promise then写法，只要替换原来的console.log部分即可：

// 原有写法的修改点
.then((result) => {
  const priceEl = document.getElementById('avax-price');
  priceEl.textContent = result.data.stats.priceAvaxUsd.toFixed(2);
});

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