Angular 9 отображает json ответ на массив - PullRequest
Новая
       15

Angular 9 отображает json ответ на массив

0 голосов
/ 02 мая 2020

У меня есть этот интерфейс 

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

Я хочу заполнить массив студентов запросом http get , который возвращает следующее json для каждого студента 

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

Как видите, интерфейс имеет разные имена из ответа ( firstName вместо first_name ), поэтому при выводе на консоль имен студентов get 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 в мой интерфейс Student? Несколько ответов о переполнении стека предполагают, что map является подходящим способом, но я не понимаю, как использовать этот оператор alog с subscribe

1 Ответ

1 голос
/ 02 мая 2020

Один из путей - это l oop вручную через массив, определение новых ключей и удаление устаревших ключей перед возвратом массива с использованием Rx JS 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?

...