Angular 9 将 json 响应映射到数组

Question

我有这个界面

export interface Student {
    cf: string,
    firstName: string,
    lastName: string,
    dateOfBirth: Date,
    description?: string,
    enrollmentDate?: Date
}

我想用 http get 请求 填充学生数组，每个学生 returns 以下 json

{cf: "blablabla", first_name: "Mario", last_name: "Rossi", date_of_birth: "1998-01-24", enrollment_date: "2019-03-20" },

如您所见，接口与响应的名称不同（firstName 而不是 first_name），因此当我在控制台打印学生的名字时，我得到 undefined.

这是我从中获取数据的服务函数

  getStudents(): Observable<Student[]> {
    return this.httpClient.get<Student[]>(this.studentsUrl, this.baseService.httpOptions);
  }

这是我的学生组件

export class StudentsComponent implements OnInit {

  students: Student[];
  childIcon = faChild;
  plusIcon = faPlus;
  private _newStudent: boolean = false;

  constructor(private studentsService: StudentsService) { }

  ngOnInit(): void {
    this.studentsService.getStudents().subscribe(
      (result: Student[]) => {
        this.students = result;
        this.students.forEach(student => console.log(student));
      },
      error => console.log(error)
    )
  }
}

有没有办法将 json 响应转换为我的学生界面？关于堆栈溢出的几个答案表明 map 是方法，但我不明白如何将该运算符与 subscribe

一起使用

Answer 1

一种方法是手动遍历数组并定义新键并删除过时的键，然后使用 RxJS map.

返回数组

服务

import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';

getStudents(): Observable<Student[]> {
  return this.httpClient.get<Student[]>(this.studentsUrl, this.baseService.httpOptions).pipe(
    map(response => response.forEach(student => {
        student.firstName = student.first_name;
        student.lastName = student.last_name;
        student.dateOfBirth = student.date_of_birth;
        student.enrollmentDate = student.enrollment_date;
        delete student.first_name;
        delete student.last_name;
        delete student.date_of_birth;
        delete student.enrollment_date;
      });
    )
  );
}

但根据数组中元素的数量，这对于单个 HTTP 请求来说可能是一项繁重的操作。您不能定义接口定义以匹配 API?

之一

Angular 9 将 json 响应映射到数组

Angular 9 mapping a json response to array

mapping

json

response

angular

angular-arrays