How to map API Response in Custom type in Angular 5

Question

I have this Interface to shape my API Response -

 interface MyTest {
 property2: string
 }

This is my Angular 5 Service Code -

getAPI(searchKey: string) {
this.productsAPIUrl = 
                  https://localhost:44331/api/SampleData/WeatherForecasts2";

return this.http.get<MyTest>(this.productsAPIUrl);
}

My Actual API Response - https://localhost:44331/api/SampleData/WeatherForecasts2 is

{"property1":"Property1","property2":"Property2","property3":"Property3"}

Now I am calling this Angular Service in my Component like below -

public incrementCounter() {

this.getAutocompleteSuggestions().subscribe((data: MyTest) => {
  console.log(data);
});
}

So Here my Question is After calling Angular Service, I am getting Entire Response. But Here I cast my API response as Type 'MyTest' which has only property2 but still WHY AM I GETTING ENTIRE RESPONSE?

HOW DO I CAST MY API Response in subset? How to Extract API Response and how to MAP it to my custom model type MyTest????

I need only Property2. So How can i map it???

Did you try this this.getAutocompleteSuggestions().pipe(map(data => data.property2)).subscribe((data: MyTest) — Oram
– Oram, Commented Sep 4, 2018 at 12:45
And this: this.getAutocompleteSuggestions().pipe(map(data => { return { property2: data.property2}})).subscribe((data: MyTest) ? — Oram
– Oram, Commented Sep 4, 2018 at 13:29

Oram · Accepted Answer · 2018-09-04 14:34:31Z

1

TypeScript is being compiled into JavaScript so in run time there is no meaning to all types you added using TypeScript.

What you can do, is map the object you get into a different object like this (stackblitz):

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

interface MyTest {
  property2: string
}

class Example {
  private getAutocompleteSuggestions() {
    return from([{"property1":"Property1","property2":"Property2","property3":"Property3"}]);
  }

  public incrementCounter() {
    this.getAutocompleteSuggestions().pipe(map(data => { return { property2: data.property2}})).subscribe((data: MyTest) => {
      console.log(data);
    });
  }
}

new Example().incrementCounter();

answered Sep 4, 2018 at 14:34

Oram

1,7012 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antoniossss · Accepted Answer · 2018-11-29 09:08:27Z

1

Because its TS - there is no such thing as runtime casting. You only typehint TS compiler how to threat given object. In case of

this.getAutocompleteSuggestions().subscribe((data: MyTest)

you literally saying: "take subscription argument, and treat it like it would be MyTest thus you are getting actual object as it will never be of that type (plain object).

If you want that entity to be of exact type you must transform it yourself (here with pipe map)

edited Nov 29, 2018 at 9:08

answered Sep 4, 2018 at 12:40

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

1 Comment

freakyroach Over a year ago

I think you mean "treat" instead of "threat".

Collectives™ on Stack Overflow

How to map API Response in Custom type in Angular 5

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related