Angular 4, convert HTTP response observed to object observed

Question

I am new to observable concepts and need help transforming.
I have a service that returns an Observable<Response> from an Http request, but I need to convert it to an Observable<PriceTag> in order to use it in a DataSource inside the connect method.
Is there any way to do this?

This is the method from my service:

 getPriceTags(): Observable<Response> { // Set the request headers const headers = new Headers({ 'Content-Type': 'application/json' }); // Returns the request observable return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers}); } 

And here is the DataSource class, where I need to return it as an Observable<PriceTag> :

 export class PriceTagDataSource extends DataSource<PriceTag> { constructor (private priceTagService: PriceTagService) { super(); } connect(): Observable<PriceTag> { // Here I retrieve the Observable<Response> from my service const respObs = this.priceTagService.getPriceTags(); // Now I need to return a Observable<PriceTag> } disconnect() {} } 

Here is an example response from my request:

 { // This object is used to check if the query on the server was sucessful "query": { "sucessful": true }, // These are my PriceTags "tags": [ { "id": "1", "name": "MAIN" }, { "id": "2", "name": "CARD" } ] } 

Answer 1

Starting with version 4.3, this can be done automatically.

Example:

 export class SomeService { constructor(private http: HttpClient) {} // <--- NOTE: HttpClient instead of Http getSome(): Observable<MyAwesomeObject> { return this.http.get<MyAwesomeObject>('myUrl'); } } 

So in your case it will be:

return this.http.post<PriceTag>(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers});

Again, use HttpClient instead of Http

Answer 2

I think your HTTP response is JSON containing PriceTag? The problem is that you want to create a PriceTag object. You can simply convert json to PriceTag as casting, but then it will not be a real PriceTag object.

We resolved this:

 export class Serializable { constructor(json?: any) { if (json) { Object.assign(this, json); } } } 

And then the serializable class:

 export class PriceTag extends Serializable {} 

Then your GetPriceTags function should be changed to:

 getPriceTags(): Observable<PriceTag> { // Set the request headers const headers = new Headers({ 'Content-Type': 'application/json' }); // Returns the request observable return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers}) .map(res => new PriceTag(res.json())); } 

Answer 3

In Angular 4+ this can be done automatically. You can change your getPriceTags method:

 export class PriceTagService { constructor(private http: HttpClient) {} getPriceTags<T>(): Observable<T> { // Set the request headers const headers = new Headers({ 'Content-Type': 'application/json' }); // Returns the request observable return this.http.post<T>('${Constants.WEBSERVICE_ADDRESS}/priceTag', null, {headers: headers}); } } 

And your DataSource class could be:

 export class PriceTagDataSource extends DataSource<PriceTag> { constructor (private priceTagService: PriceTagService) { super(); } connect(): Observable<PriceTag> { // Here you can retrieve the Observable<PriceTag> from service and return directly return this.priceTagService.getPriceTags<PriceTag>(); } disconnect() {} } 

Answer 4

just change the Observable<Response> to Observable<PriceTag>

These cast types are designed for typescript to make sure you send / expect the correct types.

EDIT

 import { PriceTag } from 'your-path-to-model'; getPriceTags(): Observable<Response> { // Set the request headers const headers = new Headers({ 'Content-Type': 'application/json' }); // Returns the request observable return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers}) .map((res: Response) => { return new PriceTag(res.json()); }); }