Angular: Typescript casting JSON response as object model not working

Question

I have an issue while I try to cast a json response to object, all the properties of my object are string is that normal ?

Here is my ajax request :

public getSingle = (keys: any[]): Observable<Badge> => {
        return this._http.get(this.actionUrl + this.getKeysUrl(keys))
            .map((response: Response) => response.json() as Badge )
            .catch(this.handleError);
}

Here is my badge model :

    export interface Badge {
        badgeNumber: number;
        authorizationLevel: number;
        endOfValidity: Date;
    }

And here is where I call the service function and I'm facing the issue :

this._badgeService.getSingle(this.ids).subscribe(
      (badge: Badge) => {
        console.log(typeof(badge.endOfValidity)); // <-- returning string and not Date
      },
      error => console.log(error);
      });

as Badge is an assertion, it doesn't actually cast anything. You need to create a new Badge object from the JSON data yourself. — jonrsharpe
– jonrsharpe, Commented Sep 3, 2017 at 10:30
I see, would you mind to tell me in my case above the best way to do it ? — Imad El Hitti
– Imad El Hitti, Commented Sep 3, 2017 at 10:35

Jota.Toledo · Accepted Answer · 2017-09-03 10:34:52Z

2

Thats kinda tricky to explain:

Date is a class, this means that values of type Date need to be created through a constructor call. In other words, create a class instance with new Date(...).

The Response.json method will only return an object in JSON format, and such doesnt contain an instance of any class, only maps of key:property.

So what you need to do, is to manually convert the value returned from .json() to a Base object. This can be done as follows:

public getSingle = (keys: any[]): Observable<Badge> => {
        return this._http.get(this.actionUrl + this.getKeysUrl(keys))
            .map(r => r.json())
            .map(v => <Badge>{
              badgeNumber: v.badgeNumber,
              authorizationLevel: v.authorizationLevel,
              endOfValidity: new Date(v.endOfValidity)
              // preferably this string should be in ISO-8601 format
             })
            //the mapping step can be done in other ways most likely
            .catch(this.handleError);
}

answered Sep 3, 2017 at 10:34

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

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

3 Comments

Imad El Hitti Over a year ago

I see the problem it's more clear in fact. I tried your solution and worked like a charm but is that any way to do it from my components when I call the method ? Because my service class is generic so the object can be anything basically

Jota.Toledo Over a year ago

if you still want to return Observable<Badge> from your service withouth the manual mapping, then u need to change the type of endOfValidity to string and manipulate the object as u like in the component.

Daniel Bezerra De Menezes Over a year ago

Hey @Jota.Toledo what is this getKeysUrl? Why 2 Urls? Im retrieving a List of json objects from 1 url, whats the other one for?

Collectives™ on Stack Overflow

Angular: Typescript casting JSON response as object model not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related