Instantiating a TypeScript class from a JSON array

Question

This question is maybe not 100% original but the questions/answers I've found so far seem to neglect a certain elephant in the room.

I have a situation which I'll simplify for example's sake. Let's say I have the following JSON response:

[
  {
    "place": {
      "name": "The Cottage",
      "rating": 4
    }
  },
  {
    "place": {
      "name": "El Burrito Loco",
      "rating": 5
    }
  }
]

Then let's say I want to have a Typescript class called Place. If I instantiate each element as a Place, I have this stupid situation:

<!-- this is an Angular template -->

<ul>
  <li *ngFor="let place of places">{{ place.place.name }}</li>
</ul>

What I would prefer, of course, is {{ place.name }} rather than {{ place.place.name }}.

So my question is: how can I transform a JSON response to match my data model?

I've already seen questions/answers like this one.

What confuses me is that a) I imagine that this transformation desire is an incredibly common one, and b) all the answers I've found so far seem to involve a ton of hacky boilerplate (no offense).

So what's the deal, does everybody just copy and paste all this boilerplate into their apps to meet what must be a very common need, and the TypeScript (or Angular) developers just didn't come up with a way to meet this need with the language or framework? That doesn't seem likely. It's very confusing.

Any insight is very much appreciated.

Possible duplicate of How do I cast a JSON object to a typescript class, please see this answer for several possible solutions. — Jakub Synowiec
– Jakub Synowiec, Commented Jan 31, 2017 at 10:50

Pankaj Parkar · Accepted Answer · 2016-11-23 19:47:39Z

1

I can think of simple map function over API call observable, which will create desired object structure in Place object model format.

this.dataService.getPlaces()
  .map(data => data.json())
  .map(items => items.map(
    item => <Place>({item.place.name, item.place})
  )
);

edited Nov 23, 2016 at 19:47

answered Nov 20, 2016 at 20:21

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

8 Comments

Jason Swett Over a year ago

Ah, I can see how this would work, although there are some other properties (which I didn't include in my example) that I need to preserve.

Pankaj Parkar Over a year ago

@JasonSwett How often this is going to happen.. for few objects writing your own custom map would make sense.

Jason Swett Over a year ago

This particular transformation would presumably only need to happen in one or two places. Transformations in general might need to happen on any number of resources.

Pankaj Parkar Over a year ago

@JasonSwett for one or two places having custom map would make sense for me. Going forward you should avoid such object format which are receiving from API, this implication will ensure that this kind of custom mapper will introduce again in application.

Jason Swett Over a year ago

I ended up doing something different from what you suggested but I upvoted your answer because it helped get me on the right track.

|

Richard Szalay · Accepted Answer · 2016-11-20 20:26:25Z

0

JSON.parse actually supports an optional reviver argument that allows you to control the creation of any given property during the deserialization process. You should be able to use that to create an instance of your class.

answered Nov 20, 2016 at 20:26

Richard Szalay

85.1k19 gold badges186 silver badges242 bronze badges

Comments

Jason Swett · Accepted Answer · 2016-11-20 21:32:31Z

0

Here's what I ended up doing. Thanks to Pankaj Parkar for providing some clues that led me here.

  getList(): Observable<Place[]> {
    return this.http.get(this.placesUrl)
               .map(response => response.json().data)
               .map(data => data.map((item) => {
                 return <Place>({
                   name: item.place.name,
                   place: item.place
                 });
               }));
  }

answered Nov 20, 2016 at 21:32

Jason Swett

45.4k70 gold badges231 silver badges360 bronze badges

1 Comment

Jason Swett Over a year ago

Downvoter, please explain your downvote. This is the exact code that solved my issue.

Collectives™ on Stack Overflow

Instantiating a TypeScript class from a JSON array

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related