Vue.js中访问JSON数据遇undefined，如何解决？

核心错误原因 #

你的JSON结构里，FareBreakdown 嵌套在 Response.Results 层级下，但代码直接访问了 response.data.Response.FareBreakdown，跳过了 Results 这一层，导致返回 undefined。

修正后的代码 #

把赋值语句调整为：

const response = await axios.post(
  "http://localhost:5000/api/fare-quote",
  requestData
);

// 补上Results层级
this.searchResul = response.data.Response.Results.FareBreakdown;

console.log(this.searchResul); // 现在能正确输出数组内容

额外优化建议 #

1. 排查数据结构：后续遇到类似问题，可先打印完整响应数据确认结构：

   console.log('完整响应数据：', response.data);
   

2. 模板展示优化：FareBreakdown 是数组，直接用 {{searchResul}} 会显示 [object Object]，可以选择遍历或转为JSON字符串展示：

   <!-- 方式1：遍历数组展示具体内容 -->
   <div v-for="(item, index) in searchResul" :key="index">
     货币类型：{{item.Currency}}
   </div>
   
   <!-- 方式2：查看完整数组结构 -->
   {{ JSON.stringify(searchResul) }}
   

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