angular 5 extract data from response

Question

product-service.ts

provinsi():Observable<any> {
return this.http.get('http://127.0.0.1:8000/api/provinsi').pipe(
map(this.extractData),
catchError(this.handleError));
}
public extractData(res: Response) {
let body = res;
return body || {};
}

restaurant.ts

provinsi() {
    this.pservice.provinsi()
        .subscribe(data => this.provinsis = data.results);
}

json

{"results":[{"province_id":"1","province":"Bali"},{"province_id":"2","province":"Bangka Belitung"} . . .

i need a way to extract my json to angular / ionic view , when i run my apps, still appear "runtime error"

cannot pass into my view - "runtime error" – Azizal Yunan P Dec 18 '18 at 16:06 — Azizal Yunan P, Dec 18 '18 at 16:06

Sergio Escudero · Answer 1 · 2018-12-19T16:25:39.130

1

Your issue is in extractData. You are returning a Response object so when you are using that you do not have the expected json. To solve this, get the json from the Response object using the .json() method:

 public extractData(res) {
    let body = res.json();
    return body || {};
 }

Tip: You can use a ES6 feature called destructuring when you access to a json property. e.g:

provinsi() {
    this.pservice.provinsi()
        .subscribe(({ results }) => this.provinsis = results);
}

UPDATE: If you want to work with TypeScript classes, you need to import the Response class from @angular/http:

import { Http, Response } from '@angular/http';

This class was deprecated. You can check the new usage in this question here

edited Dec 19 '18 at 16:25

answered Dec 18 '18 at 16:48

Sergio Escudero

1,798
14
21

It is with parenthesis like `({ results }) =>`. This is a new ES6 feature called destructuring @AzizalYunanP – Sergio Escudero Dec 19 '18 at 14:36
i've added import Http response , but still not working – Azizal Yunan P Dec 22 '18 at 14:10

angular 5 extract data from response

1 Answers1