如何从GET API响应中提取单个目标字段值（如grassIndex）

根据你给出的响应结构，目标字段的完整访问路径为：
响应对象.data.timelines[0].intervals[0].values.grassIndex

具体实现分两步：

• 先把接口返回的JSON格式响应文本解析为可操作的JavaScript对象
• 按照上述嵌套路径逐层取值，拿到值后就可以动态插入到页面中

不同请求场景的代码示例 #

• 原生fetch请求实现

fetch('替换为你的实际API请求地址')
  .then(response => {
    if (!response.ok) throw new Error('接口请求异常')
    // 解析JSON响应为JS对象
    return response.json()
  })
  .then(result => {
    // 提取目标字段
    const grassIndex = result.data.timelines[0].intervals[0].values.grassIndex
    // 后续把值动态渲染到页面即可，示例：
    // document.getElementById('grass-index-show').innerText = `当前草花粉指数：${grassIndex}`
  })
  .catch(err => console.error('请求出错：', err))

• 容错写法（避免接口返回空结构导致代码报错）
  如果无法保证接口每次都返回完整的嵌套结构，可以用可选链操作符做防御性取值，任意层级缺失时会返回undefined，不会中断代码运行：

const grassIndex = result?.data?.timelines?.[0]?.intervals?.[0]?.values?.grassIndex

• Axios请求实现
  Axios会自动完成JSON响应解析，直接从响应的data字段开始取值即可：

axios.get('替换为你的实际API请求地址')
  .then(res => {
    const grassIndex = res.data.data.timelines[0].intervals[0].values.grassIndex
    // 编写页面渲染逻辑即可
  })

注意：示例中固定取数组第0项，是基于你给出的示例响应里timestep: "current"对应timelines数组第一个元素、当前时间间隔对应intervals数组第一个元素的结构。如果后续接口可能返回多组时序数据，可以先用数组的find方法匹配到timestep === 'current'的timeline项，再匹配对应时间的interval项，避免固定取下标导致取值错误。

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