访问嵌套JSON字段报错 接口数据映射前端实现方案

你遇到的TypeError: Cannot read properties of undefined (reading 'title')核心原因是：jobs.results是存储了10条职位数据的数组，而非单个职位对象。直接写results.title相当于在数组类型上读取title属性，数组本身不存在这个字段，拿到的是undefined，后续再读取属性就会抛出类型错误。

数组类型的数据必须先通过索引拿到单个职位对象，再读取对象下的字段，或者遍历数组批量处理所有条目：

// 1. 读取单条数据（以第一条、索引为0的数据为例）
const firstJob = jobs.results[0]
const firstJobTitle = firstJob.title // 职位标题
const firstJobLocation = firstJob.location.display_name // 职位显示位置
const firstJobArea = firstJob.location.area // 职位所属区域数组
const firstCompany = firstJob.company.display_name // 招聘公司名

// 2. 批量读取所有数据：遍历数组即可拿到每一条职位对象
jobs.results.forEach((job, index) => {
  console.log(`第${index+1}条职位标题：`, job.title)
})

以下是原生JS的可直接参考的实现，带了字段兜底逻辑，避免个别字段缺失导致页面渲染报错：
首先准备页面容器：

<div id="job-container" style="max-width: 800px; margin: 20px auto;"></div>

然后写渲染逻辑，在拿到接口返回的jobs数据后调用即可：

function renderJobList(jobs) {
  const container = document.getElementById('job-container')
  // 先做数据合法性校验
  if (!jobs || !Array.isArray(jobs.results)) {
    container.innerHTML = '<p>暂时没有可展示的职位数据</p>'
    return
  }

  // 遍历生成所有职位卡片的HTML
  const jobCards = jobs.results.map(job => {
    // 字段兜底，缺失时显示默认值
    const title = job.title ?? '未命名职位'
    const company = job.company?.display_name ?? '未知招聘方'
    const location = job.location?.display_name ?? '工作地点待确认'
    const workType = job.contract_time ?? '用工类型待确认'
    const publishTime = job.created ? new Date(job.created).toLocaleDateString() : '发布时间未知'
    const desc = job.description ?? '暂无职位描述'
    const jumpUrl = job.redirect_url ?? 'javascript:;'

    return `
      <div class="job-card" style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin-bottom: 12px;">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
          <h3 style="margin: 0; font-size: 18px;">
            <a href="${jumpUrl}" target="_blank" style="color: #165DFF; text-decoration: none;">${title}</a>
          </h3>
          <span style="background: #f0f5ff; color: #165DFF; padding: 2px 8px; border-radius: 4px; font-size: 12px;">${workType}</span>
        </div>
        <div style="color: #6b7280; font-size: 14px; margin-bottom: 12px;">
          <span>${company}</span> · <span>${location}</span> · <span>${publishTime}</span>
        </div>
        <p style="margin: 0; color: #374151; font-size: 14px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
          ${desc}
        </p>
      </div>
    `
  }).join('')

  container.innerHTML = jobCards
}

// 接口请求完成后调用渲染方法
// fetchJobs().then(res => renderJobList(res))

• 接口请求是异步逻辑，必须等请求完全返回、拿到完整的jobs对象后再执行渲染和字段读取，不要在请求发起后立刻读取字段，否则会因为数据还没赋值触发同样的undefined错误
• 示例中用了可选链?.和空值合并运算符??做兼容处理，如果需要兼容IE等老旧浏览器，可以替换为a && a.b && a.b.c的多层判断写法，避免语法报错

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