Angular 15中解析属性不确定的对象时JSON.parse报错如何解决？

一、先处理JSON.parse错误 #

你遇到的JSON.parse错误，大概率是服务器返回的JSON语法不合法导致的——看你给出的示例JSON，units对象里最后一个键值对后面多了个尾逗号：

"units": {
  "time": "iso8601",
 },

严格的JSON解析器不允许这种格式，Angular的HttpClient默认会自动解析响应为JSON，所以会触发这个错误。虽然部分浏览器解析器能容错并生成可打印的对象，但错误依然会被抛出。

解决步骤：

1. 要求后端修正返回的JSON，移除所有多余的尾逗号；
2. 如果后端暂时无法修改，可在请求时手动指定responseType: 'text'，用宽松的解析库（比如JSON5）处理：

   // data.service.ts
   getRequest(test: any){
     return this.httpClient.get("https://someRequest/returnofjson", { responseType: 'text' }).pipe(
       map(text => JSON5.parse(text)) // 需先安装json5：npm install json5
     );
   }
   

二、解析属性不确定的对象 #

针对属性不确定的响应对象，推荐以下几种实用方式：

1. 可选链操作符防报错 #

直接用?.访问属性，属性不存在时返回undefined，不会触发报错：

// my.Component.ts
ngOnInit(): void {
  this.dataService.getRequest(this.testVar).subscribe((data: any)=>{
    console.log(JSON.stringify(data?.someProperty));
    console.log(JSON.stringify(data?.contact?.code));
  });
}

2. Partial类型约束（更规范） #

定义一个包含所有可能属性的类型，用Partial标记所有属性为可选，兼顾类型提示和灵活性：

// 可放在单独的types文件中
type ApiResponse = Partial<{
  lat: number;
  lng: number;
  time_ms: number;
  utc_offset_sec: number;
  tz: string;
  tz_abbr: string;
  elev: number;
  contact: Partial<{
    code: number;
    time: string;
  }>;
  units: Partial<{
    time: string;
  }>;
  dates: Partial<{
    time: string[];
  }>;
}>;

订阅时使用该类型，配合可选链访问：

ngOnInit(): void {
  this.dataService.getRequest(this.testVar).subscribe((data: ApiResponse)=>{
    console.log(JSON.stringify(data?.dates?.time));
    console.log(JSON.stringify(data?.units?.time));
  });
}

3. 类型守卫做精确校验 #

如果需要对属性做严格的存在性检查，可编写类型守卫函数：

function hasValidContact(data: any): data is { contact: { code: number; time: string } } {
  return Boolean(data 
    && typeof data === 'object' 
    && 'contact' in data 
    && typeof data.contact === 'object' 
    && data.contact.code !== undefined 
    && data.contact.time !== undefined
  );
}

订阅时使用：

ngOnInit(): void {
  this.dataService.getRequest(this.testVar).subscribe((data: any)=>{
    if (hasValidContact(data)) {
      // TypeScript会自动推断data.contact的类型
      console.log(data.contact.code, data.contact.time);
    } else {
      console.log('contact属性不存在或格式错误');
    }
  });
}

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