Angular/RxJS应用中如何解析JSON及排查TypeScript对象解析错误？

错误根源 #

你的JSON文件中使用了new Date(1996, 8, 20)这种JavaScript语法，这不是合法的JSON格式。JSON仅支持字符串、数字、布尔值、数组、对象和null，不允许函数/构造函数调用，这是导致HTTP解析失败的直接原因。

解决步骤 #

1. 修复JSON文件格式 #

将所有new Date(...)替换为ISO标准日期字符串。例如：

• 原内容："FirstOrderedOn": new Date(1996, 8, 20)
• 修改后："FirstOrderedOn": "1996-09-20T00:00:00.000Z"（注意JavaScript月份是0索引，8对应实际9月）

2. 正确转换为IProduct2数组 #

原代码中使用扩展运算符会保留所有冗余字段，且searchKey不属于IProduct2接口，建议明确提取所需字段，或扩展接口适配额外属性：

方案1：仅提取目标字段（推荐）

products2$ = this.http.get<any[]>(this.product2Url)
.pipe(
  map(rawProducts => 
    rawProducts.map(product => ({
      ProductID: product.ProductID,
      ProductName: product.ProductName
    } as IProduct2))
  ),
  tap(data => console.log('转换完成：', JSON.stringify(data))),
  catchError(this.handleError)
);

方案2：保留searchKey（扩展接口）

先定义包含搜索键的新接口：

export interface IProductWithSearch extends IProduct2 {
  searchKey: string[];
}

再修改请求处理：

products2$ = this.http.get<any[]>(this.product2Url)
.pipe(
  map(rawProducts => 
    rawProducts.map(product => ({
      ProductID: product.ProductID,
      ProductName: product.ProductName,
      searchKey: [product.ProductName]
    } as IProductWithSearch))
  ),
  tap(data => console.log('转换完成：', JSON.stringify(data))),
  catchError(this.handleError)
);

3. 错误定位与信息展示 #

定位JSON错误位置

• 直接在浏览器访问JSON文件地址，查看控制台的解析错误提示（会显示具体行号）
• 使用在线JSON校验工具粘贴内容，快速定位非法语法

组件中展示成功/错误状态

修改组件模板：

<!-- 展示成功数据 -->
<div *ngIf="products2$ | async as products; else errorSection">
  <h3>解析成功</h3>
  <pre>{{ products | json }}</pre>
</div>

<!-- 展示错误信息 -->
<ng-template #errorSection>
  <div style="color: #dc3545;">
    <h3>解析失败</h3>
    <p>{{ errorMessage }}</p>
  </div>
</ng-template>

在组件中添加错误信息变量并更新错误处理：

errorMessage = '';

products2$ = this.http.get<any[]>(this.product2Url)
.pipe(
  // 转换逻辑同上述方案
  map(rawProducts => ...),
  tap(data => console.log('转换完成：', JSON.stringify(data))),
  catchError(err => {
    this.errorMessage = `错误代码：${err.status}，详情：${err.message}`;
    return throwError(() => new Error(this.errorMessage));
  })
);

内容的提问来源于stack exchange，提问作者sam sergiy klok