如何从字符串化的API返回结果中提取指定值并打印到网页段落

实现方法 #

• 首先在HTML中添加用于展示数据的段落元素，给元素设置唯一ID方便JS选中操作：

<p id="gas-data-display"></p>

• 修改原有fetch请求的回调逻辑，拿到JSON返回值后提取指定字段，再写入段落元素即可。以下是完整代码示例（示例中提取接口返回的fast快速gas价格字段，你可以根据自己的需求替换为目标字段）：

<script type="text/javascript">
// 预先获取要写入的段落DOM元素
const displayPara = document.getElementById('gas-data-display');

fetch('https://ethgasstation.info/api/ethgasAPI.json?api-key=apikey')
  .then(response => response.json())
  .then(json => {
    // 保留原有控制台打印逻辑
    console.log(JSON.stringify(json));
    // 提取你需要的指定值，可根据控制台打印的JSON结构替换字段名
    const targetValue = json.fast;
    // 把值写入网页段落
    displayPara.textContent = `当前快速Gas价格：${targetValue}`;
  })
  // 可选添加错误捕获逻辑，避免请求异常时无提示
  .catch(error => {
    console.error('接口请求失败：', error);
    displayPara.textContent = '数据加载失败，请稍后重试';
  });
</script>

注：你可以先从控制台打印的完整JSON结构里确认要提取的字段对应的Key名称，再替换代码中的json.fast即可。

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