Angular 5中获取JSON特定字段isRight值返回undefined问题

嘿，我来帮你搞定这个问题！你说没报错但拿不到isRight的值，大概率是数据结构处理或者异步逻辑的问题，咱们一步步排查：

1. 先确认你的JSON数据结构是否合法 #

你提供的JSON片段是两个对象直接并列，这其实是无效的JSON语法，正确的格式应该是把多个对象包裹在数组里：

[
{
"QuestionID" : "1",
"Question" :"The ozone layer restricts: ",
"OP" :["X-rays and gamma rays" , "Visible light", "Infrared radiation", "Ultraviolet radiation" ],
"isRight" :"Ultraviolet radiation"
},
{
"QuestionID" : "2",
"Question" :"The length of the bridge, which a train 130 metres long and..."
}
]
如果后端返回的是这种无效格式，即使没报错，解析后的结果也可能不符合预期，先确认数据源的格式是否正确。

2. 检查Angular中数据获取的代码逻辑 #

假设你用Angular的HttpClient获取数据，最常见的错误是把数组当成单个对象来访问属性。比如你可能写了这样的代码：

import { HttpClient } from '@angular/common/http';

// ...
constructor(private http: HttpClient) {}

getQuestions() {
  this.http.get('/assets/questions.json').subscribe(data => {
    console.log(data.isRight); // 这里会返回undefined！因为data是数组，不是单个对象
  });
}

正确的处理方式： #

因为返回的是数组，你需要遍历数组或者指定索引来访问单个对象的isRight：

// 方式1：遍历数组获取每个问题的isRight
this.http.get('/assets/questions.json').subscribe((questions: any[]) => {
  questions.forEach(question => {
    console.log('当前问题的正确选项：', question.isRight);
  });
});

// 方式2：直接取数组中的某一个元素
this.http.get('/assets/questions.json').subscribe((questions: any[]) => {
  if (questions.length > 0) {
    console.log('第一个问题的正确选项：', questions[0].isRight);
  }
});

3. 用类型定义让代码更安全（推荐） #

为了避免类型混淆，你可以定义一个Question接口，让TypeScript帮你做类型检查：

// 定义Question接口
interface Question {
  QuestionID: string;
  Question: string;
  OP: string[];
  isRight: string;
}

// 获取数据时指定类型
getQuestions() {
  this.http.get<Question[]>('/assets/questions.json').subscribe(questions => {
    // 这里TypeScript会提示每个question的属性，避免拼写错误
    questions.forEach(q => {
      console.log(q.isRight);
    });
  });
}

4. 排查异步逻辑问题 #

如果你在subscribe回调外面访问数据，也会得到undefined，因为HTTP请求是异步的：

// 错误示例：异步回调外访问数据
let questionData: Question[] | undefined;
this.http.get<Question[]>('/assets/questions.json').subscribe(data => {
  questionData = data;
});
console.log(questionData?.[0]?.isRight); // 这里会undefined，因为请求还没完成

解决方法： #

把所有需要使用数据的逻辑放在subscribe回调里面，或者用async/await语法：

// 使用async/await
async getQuestions() {
  const questions = await this.http.get<Question[]>('/assets/questions.json').toPromise();
  console.log(questions?.[0]?.isRight); // 这里能正确拿到值
}

5. 确认本地JSON文件的访问权限 #

如果你的JSON是本地文件，要确保它放在assets目录下，并且angular.json中已经配置了assets路径，否则Angular无法访问到该文件：

// angular.json中的配置示例
"assets": [
  "src/favicon.ico",
  "src/assets" // 确保包含你的JSON文件所在目录
]

按照上面的步骤排查，应该就能解决isRight返回undefined的问题啦！

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