Angular - сопоставить с returnEntity в ответе API

Question

Я использую Angular 8.2 и вызываю API-интерфейс. NET Core 3.1, и я могу заставить вызов работать и возвращать данные, которые мне нужны, но синтаксис, который я в итоге использовал, выглядит так можно было бы упростить, но пока никакие альтернативы, которые я пробовал, похоже, не работают.

Я вызываю API следующим образом:

getCatsApi(): Observable<any[] | DataServiceError> {        
    console.log("API");       
    let mcats = this._http.get<any[]>( Settings.apiRoot + 'api/Cat/GetCats')
        .pipe(
            catchError(err => this.handleHttpError(err))
        )        
    console.log("Get Cats from API");
    console.log(mcats);
    return mcats;
}

Это возвращает структуру ответа, которая выглядит как это:

Данные, которые мне нужны, находятся в свойстве «ReturnEntity», чуть ниже свойства «responseErrors».

I Я могу получить эти данные беспорядочным способом:

getCats(){
this._dataService.getCatsApi().subscribe(data => {
  for(let j = 0; j < data['returnedEntity']['catList'].length; j++) {
    console.log(data['returnedEntity']['catList'][j]);
    this.catsObj.push(data['returnedEntity']['catList'][j]);
  }
});

}

Это работает, и я получаю нужные мне данные. Но похоже, что должен быть лучший способ вернуть возвращенный объект без явной ссылки на него со строками массива. Я использую <any[]> в исходном HTTP-вызове, но если я изменю его на интерфейс <Category[]>, который я создал, это, похоже, не изменит ситуацию. Я предполагаю, что мне нужно использовать некоторую форму функции rx js .map (), но пока я не нашел способа заставить это работать. Это заставляет меня задуматься, а что-то еще не так? Приветствуются любые мысли! Спасибо!

Answer 1

из-за data['returnedEntity']['catList'] кажется, что ваш ReturnEntity имеет атрибут с именем 'cadList' с типом массива.

ваш data['returnedEntity'] должен иметь тип T,

тогда вы можно написать что-нибудь как:

this.catsObj = data['returnedEntity']

также, поделитесь кодом бэкенда, пожалуйста

Answer 2

Вы можете либо отредактировать серверную часть, чтобы напрямую вернуть свойство catList, либо сопоставить ответ с помощью Rx JS map перед подпиской на него. L oop, который вы используете, кажется избыточным.

Если подпись объекта данных из бэкэнда соответствует вашему типу внешнего интерфейса Category, вы также можете заменить any[] на Category[].

Сервис

getCatsApi(): Observable<Category[] | DataServiceError> {        
  return this._http.get( Settings.apiRoot + 'api/Cat/GetCats').pipe(
    map(response => response['returnedEntity']['catList']),       // <-- map the reponse here to return the `catList` array
    catchError(err => this.handleHttpError(err))
  );
}

Контроллер

getCats(){
  this._dataService.getCatsApi().subscribe(
    data => { this.catsObj = data },
    error => { }
  );
}

^{Также имя catsObj выглядит вводящим в заблуждение, учитывая, что это массив.}