Слияние результата HTTP-запроса с массивом

Question

Я сожалею о моем непонятном названии, но у меня в основном есть Интерфейс

export interface Tutor {
  name: string;
  rating: number;
  personalInfo: string;
}

И функция, которая получает список так называемых Репетиторов из моего бэкэнда:

public loadTutors() {
    const url = 'http://localhost:8080/loadTutors';
    this.http.get<Tutor[]>(url).pipe(map(tutor =>
      tutor.forEach(tut => this.tutors.push(tut))))
      .subscribe();
    console.log(this.tutors);
  }

В объектной модели моего внутреннего проекта больше полей, чем в Tutor Interface, и добавление нового Entity только для этого конкретного c запроса не выглядит хорошим масштабируемым решением. После функции я получаю что-то вроде этого:

Array(2)
0:
username: "Some Username"
email: null
name: null
password: "$2a$11$T44uetsjh1HxLu/ilsTiMODu.aoKLf8/zo3WPM/FUjeMXZRkpDz1S"
balance: 0
personalInfo: "Some personal Info"
rating: 0
userRoles: [{…}]
__proto__: Object
...

Что было бы наилучшим методом перебора полей ответов или подгонки ответа к интерфейсу Tutor?

Спасибо за ваше время и ответы заранее, и я надеюсь, что у вас будет хороший день!

Answer 1

Я бы просто взял то, что мне нужно.

Я бы сделал:

public loadTutors() {
    const url = 'http://localhost:8080/loadTutors';
    this.http.get<Tutor[]>(url).pipe(
        // pluck name, rating, personalInfo from backend response and return it as an object
        map(tutors => tutors.map(({ name, rating, personalInfo })=> ({ name, rating, personalInfo }))),
      )
      .subscribe(tutors => {
        console.log(tutors);
        this.tutors = tutors;
        console.log(this.tutors);
      });
  }

Способ написания карты, отличный от ES6, будет

map(tutor => ({ name: tutor.name, rating: tutor.rating, personalInfo: tutor.personalInfo })

Answer 2

Интерфейс - это просто модель, это не значит, что он конвертирует переменные в эту модель, вы должны сделать это вручную. Тогда лучше использовать функцию карты, а не вставлять ее в массив. Я также рекомендую вам запустить console.log внутри подписки, поскольку метод http get является асинхронным.

public loadTutors() {
    const url = 'http://localhost:8080/loadTutors';
    this.http.get<Tutor[]>(url).pipe(
      map(tutors => {
         this.tutors = tutors.map(tut => {
           return {
             name: tut.name,
             rating: tut.rating,
             personalInfo: tut.personalInfo
           }
         })
      })
    ).subscribe(() => {
       console.log(this.tutors)
    })

}