Te recomendamos que revises esta resolución en un entorno controlado antes de pasarlo a producción, saludos.
Solución:
Para futuros visitantes: En el nuevo HttpClient
(Angular 4.3+), el response
object es JSON por defecto, por lo que no necesita hacer response.json().data
más. Solo usa response
directamente.
Ejemplo (modificado de la documentación oficial):
import HttpClient from '@angular/common/http';
@Component(...)
export class YourComponent implements OnInit
// Inject HttpClient into your component or service.
constructor(private http: HttpClient)
ngOnInit(): void
this.http.get('https://api.github.com/users')
.subscribe(response => console.log(response));
No olvides importarlo e incluir el módulo debajo importaciones en tu proyecto aplicación.módulo.ts:
...
import HttpClientModule from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
// Include it under 'imports' in your application module after BrowserModule.
HttpClientModule,
...
],
...
ACTUALIZACIÓN: para rxjs > v5.5
Como se menciona en algunos de los comentarios y otras respuestas, de forma predeterminada, HttpClient deserializa el contenido de una respuesta en un objeto. Algunos de sus métodos permiten pasar un argumento de tipo genérico para convertir el resultado en un tipo de pato. Por eso no hay json()
método más.
import throwError from 'rxjs';
import catchError, map from 'rxjs/operators';
export interface Order
// Properties
interface ResponseOrders
results: Order[];
@Injectable()
export class FooService {
ctor(private http: HttpClient)
fetch(startIndex: number, limit: number): Observable
let params = new HttpParams();
params = params.set('startIndex',startIndex.toString()).set('limit',limit.toString());
// base URL should not have ? in it at the en
return this.http.get(this.baseUrl,
params
).pipe(
map(res => res.results
Tenga en cuenta que podría transformar fácilmente el devuelto Observable
a un Promise
simplemente invocando toPromise()
.
RESPUESTA ORIGINALES:
En su caso, puede
Suponiendo que su backend devuelve algo como:
results: [,]
en formato JSON, donde cada es un objeto serializado, necesitaría lo siguiente:
// Somewhere in your src folder
export interface Order
// Properties
import HttpClient, HttpParams from '@angular/common/http';
import Observable from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import Order from 'somewhere_in_src';
@Injectable()
export class FooService
ctor(private http: HttpClient)
fetch(startIndex: number, limit: number): Observable
Eliminé la sección de captura, ya que esto podría archivarse a través de un interceptor HTTP. Revisa los documentos. Como ejemplo:
https://gist.github.com/jotatoledo/765c7f6d8a755613cafca97e83313b90
Y para consumir solo necesitas llamarlo así:
// In some component for example
this.fooService.fetch(...).subscribe(data => ...); // data is Order[]