Разобрать JSON ответ в Angular 8 с ответом. json ()

Question

Я пытаюсь получить данные поиска из API в angular 8. У меня проблема с методом response.json(), так как он создает ошибку response.json is not a function.

search(query: string): Observable<SResult[]> {   
  const queryUrl = `${url}${params}`;
  return this.http.get(queryUrl, {headers})   
    .pipe(
      map((response : any) => {
        return (<any>response.json())
          .map((res) => {
            return new SearchResult(res)
          })
      })      
    ) 
}

Answer 1

При использовании angular HttpClient ваш запрос автоматически анализируется как JSON (если тип ответа на запрос не настроен для обработки другого типа данных). Как сказал @Alexander Statoselsky в комментарии, вы можете установить тип своего ответа, так что TypeScript теперь будет определять, какая структура данных возвращается из бэкэнда.

search(query: string): Observable<SearchResult[]> {   
  const queryUrl = `${url}${params}`;
  return this.http.get<CustomResultInterface[]>(queryUrl, {headers}).pipe(

    // As HttpClient cares only about the structure, you still need to loop 
    // through the returned data and create a classes if you want the method to return
    // a list of SearchResult classes.
    // CustomResultInterface is your custom interface that carries only the structure of the response
    map(results => results.map(result => new SearchResult(result)))
  ); 
}

Кроме того, при использовании queryParameters вы можете захотеть взгляните на HttpParams , который вы будете использовать в следующем примере

search(query: string): Observable<SearchResult[]> {   
  const params = new HttpParams();
  params.set('query', query);
  return this.http.get<CustomResultInterface[]>(url, { params, headers }).pipe(
    map(results => results.map(result => new SearchResult(result)))
  ); 
}