在 Typescript 中解析 JSON 对象

Posted 2023-03-13

【中文标题】在 Typescript 中解析 JSON 对象

【英文标题】：Parse JSON Object in Typescript

【发布时间】：2019-06-27 12:13:58

【问题描述】：

我不熟悉 Angular 和使用 Spring Boot 构建服务。因此，如果以下问题非常简单，请原谅。

我有来自 Spring Rest 服务的以下 JSON 响应。我正在尝试将此服务响应映射到 Angular 材料数据表。

但是，由于我还是 Angular、Typescript 和解析 json 对象的新手，请您帮我指点一下如何将下面列出的 json 响应映射到我的接口。

JSON 响应

    "content": [
        
            "id": "1000",
            "name": "R&D IN",
            "location": "IN",
            "costCenter": "RD-001"
        
    ],
    "last": false,
    "totalElements": 10,
    "totalPages": 10,
    "size": 1,
    "number": 1,
    "sort": [
        
            "direction": "ASC",
            "property": "name",
            "ignoreCase": false,
            "nullHandling": "NATIVE",
            "ascending": true,
            "descending": false
        
    ],
    "first": false,
    "numberOfElements": 1

我需要在上面的json响应中映射以下两个属性-> 内容和totalRecords

我在 Angular 中有以下服务代码

department.service.ts

getAllDepartments(filter: string, sortOrder: string, pageNumber: number, pageSize: number): Observable<DepartmentList>

    return this.http.get<DepartmentList>(this.API_URL + '/api/department/', 
      params: new HttpParams()
          .set('filter', filter)
          .set('sort', 'name')
          .set('page', pageNumber.toString())
          .set('size', pageSize.toString())
    );
  

department.component.ts

this.deptService.getAllDepartments(filter, sortDirection,pageIndex, pageSize)
      .pipe(
          catchError(() => of([])),
          finalize(() => this.loadingSubject.next(false)))
      .subscribe(
          departments => 
            let obj = JSON.stringify(departments);
            console.log('Department List :: ', departments);
            console.log(obj.content);
            this.departmentSubject.next(departments.content);
            this.departmentRecCount.next(departments.totalElements);
          );

但是，最后两行显示我的角度错误。但是，尽管有错误，代码仍然有效

以下两行中出现错误-

this.departmentSubject.next(departments.content);
this.departmentRecCount.next(departments.totalElements);

错误消息 - 错误 TS2339：类型 'any[] 上不存在属性 'content' |部门列表”。类型“any[]”上不存在属性“content”。

Department.model.ts

export interface DepartmentList 
    content: Department[];
    totalElements: number;
  

  export interface Department 
    id: string;
    name: string;
    location: string;
    costCenter: string;
  

如何解决上述问题。

如果这已经在任何其他帖子中解释过，请原谅。

【参考方案1】：

在分配之前尝试输入 cast departments。

const deptList = departments as DepartmentList;

this.departmentSubject.next(deptList.content);
this.departmentRecCount.next(deptList.totalElements);