[英]Angular 9 mapping a json response to array
我有这个界面
export interface Student {
cf: string,
firstName: string,
lastName: string,
dateOfBirth: Date,
description?: string,
enrollmentDate?: Date
}
我想用http get request填充一组学生,它为每个学生返回以下 json
{cf: "blablabla", first_name: "Mario", last_name: "Rossi", date_of_birth: "1998-01-24", enrollment_date: "2019-03-20" },
如您所见,该接口的名称与响应不同( firstName而不是first_name ),因此当我将学生的姓名打印到控制台时,我得到undefined 。
这是我从中获取数据的服务 function
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是这种方式,但我不明白如何使用该运算符和订阅
一种方法是手动循环遍历数组并定义新键并删除过时的键,然后使用 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 之一吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.