Angular 7 HttpClient get - можете ли вы получить доступ и обработать возвращаемый объект? - PullRequest
Новая
       40

Angular 7 HttpClient get - можете ли вы получить доступ и обработать возвращаемый объект?

0 голосов
/ 05 марта 2019

Я знаю, что это общий вопрос, но я исчерпал Google и перепробовал много подходов. Любая обратная связь приветствуется.

HTTPClient равен Angular 5+, поэтому он возвращает объект, созданный из данных JSON ответа.Я получаю массивный ответ JSON от конечной точки, над которой у меня нет контроля, и я хочу использовать около 20% ответов в своем приложении и игнорировать остальные.

Я действительно очень стараюсь избежать использования сериишаблоны или объекты экспорта или что-то еще и пытаясь заставить этот массивный нетипизированный Observable в типизированный объект с сотнями полей, многие из которых являются Массивами.Все, что мне нужно для приложения, это просто массив очень маленьких объектов с 3 полями на объект.Все три поля в ответе JSON заполнены, и я хочу сопоставить их с моим объектом. Кажется, что карта работает только при использовании объекта полного ответа, и я не могу найти пример, где .map выполняет пользовательскую работу, кроме как вслучай, когда вы отображаете несколько полей на 1 объект, и я пытаюсь сопоставить массив моих маленьких объектов.

ОБНОВЛЕНО

В основном я хочу, чтобы этот сервисвернуть объект типа DislayData в модуль, который подписывается на него, но я получаю только объект обратно.Это не то, что мне в конечном итоге нужно сделать, но если я смогу доказать, что могу сопоставить тело ответа с моим необходимым типом возвращаемого значения, я смогу затем разбить тело ответа и вернуть массив того типа, который мне действительно нужен, основываясь на моемглупый объект DisplayData.Еще раз спасибо! 

export interface DislayData {

    body: any;
   
}

...
export class DataService {

  constructor(private http: HttpClient) { }
  /** GET data from the black box */
  getData(): Observable<DislayData> {

    return this.http.get<HttpResponse<any>>(searchUrl, { observe: 'response' })
      .pipe(
         map(res => {
           return res.body as DislayData;
        }
        tap(res => console.log(//do stuff with entire respoonse also)),
        catchError(err => this.handleError(err)));

  }

  private handleError(error: HttpErrorResponse) {
  ...

1 Ответ

0 голосов
/ 05 марта 2019

Знаете ли вы структуру отвечающего объекта?

Если да, вы можете сделать что-то вроде этого: 

item$ = new BehaviorSubject<any>({});
item = {
  foo: 'a',
  bar: 'b',
  iton: [1, 2, 3],
  boo: {
    far: 'c'
  }
};

logNewItem() {
    this.item$
      .pipe(
        map(response => {
          if (response.foo 
              && response.iton
              && response.iton.length >= 3 
              && response.boo
              && response.boo.far) {
            let newItem = {
              foo: response.foo,
              iton2: response.iton[2],
              far: response.boo.far
            };
            console.log(newItem); // output: Object { foo: "a", iton2: 3, far: "c" }
          }
        })
      )
      .subscribe();
    this.item$.next(this.item);
  }

По сути, вы можете просто убедиться, что свойства существуют, вызвать их напрямую и сопоставить их с более подходящим объектом.

Я настоятельно рекомендую создать интерфейс для объекта, который вы получаете, и интерфейс или класс для объекта, который вы отображаете.В этом случае вы также можете написать более компактный код, например: 

[...]
map(response: MyAPIResponse => {
            let newItem = new NewItem(response);
            console.log(newItem); // output: Object { foo: "a", iton2: 3, far: "c" }
          }
        })
[...]

class NewItem {

foo: string;
iton2: string;
far: string;

constructor(apiResponse: MyAPIResponse) {
  //Validate parameter first
  this.foo = apiResponse.foo;
  this.iton2 = apiResponse.iton[2];
  this.far = apiResponse.boo.far;

и сделать ваш код более читабельным.

...