如何在JavaScript中解析JSON并提取指定字段输出展示到HTML

算力阿峰

2026-10-5

解决方法

核心原因

你无法直接提取目标值的核心原因是 JSON 结构中的fares是数组类型，内部存储的是多个航班套餐对象，必须先指定数组下标（数组第一个元素的下标为0），才能访问到内部的outbound相关属性。

单条数据取值代码

如果确定只需要第一个航班套餐的信息，直接通过下标取值即可：

出发机场名称：const depAirport = data.fares[0].outbound.departureAirport.name
到达机场名称：const arrAirport = data.fares[0].outbound.arrivalAirport.name
出发日期：const depDate = data.fares[0].outbound.departureDate
单程票价：const price = data.fares[0].outbound.price.value

遍历所有航班取值代码

如果后续接口会返回多条航班数据，可以用遍历方法批量提取：

data.fares.forEach((fareItem, index) => {
  const depAirport = fareItem.outbound.departureAirport.name
  const arrAirport = fareItem.outbound.arrivalAirport.name
  const depDate = fareItem.outbound.departureDate
  const price = fareItem.outbound.price.value
  // 按需处理提取到的值，比如打印测试
  console.log(`第${index+1}个航班：${depAirport} → ${arrAirport}，出发时间${depDate}，票价${price}欧元`)
})

渲染到HTML示例

给一个最简单的渲染到页面的参考代码：

<!-- 页面内提前定义好承载航班信息的容器 -->
<div id="flight-container"></div>

const container = document.getElementById('flight-container')
// 遍历拼接DOM元素插入页面
data.fares.forEach(fareItem => {
  const flightCard = document.createElement('div')
  // 可以自行修改样式和展示格式
  flightCard.innerHTML = `
    <h3>${fareItem.outbound.departureAirport.name} → ${fareItem.outbound.arrivalAirport.name}</h3>
    <p>出发时间：${new Date(fareItem.outbound.departureDate).toLocaleString('zh-CN')}</p>
    <p>票价：${fareItem.outbound.price.value} ${fareItem.outbound.price.currencySymbol}</p>
    <hr>
  `
  container.appendChild(flightCard)
})