How to map JSON to TypeScript objects with calculated properties

Question

I have a fairly standard service returning some JSON.

An example return body could be:

[{ a: 1, b: 2 }]

I want to map this to instances of the following Typescript class:

export class MyClass {
  a: number;
  b: number;

  get c() : number {
      return this.a + this.b;
  }
}

I incorrectly assumed HttpClient.get would do exactly this, but while it does map it to compatible objects, they are missing the property.

this.http.get<MyClass[]>('http://www.example.com/endpoint');

Is there a way to get Angular to do this automatically, or do I need to a manual mapping like this:

.map(data => {
    const results : MyClass[];
    for(const d of data) {
        const mc = new MyClass();
        mc.a = d.a;
        mc.b = d.b;
        results.push(mc);
    }
    return results;
});

It works, but it is tedious code to write and can easily create dependencies I do not want in my code.

Mixalloff · Accepted Answer · 2018-03-27 10:59:37Z

4

1) You can create some parse function like

const mapJsonToObject = Type => obj => Object.assign( new Type(), obj );

And use it like

...
.map( data => mapJsonToObject(MyClass) )
...

2) In other way, you can assign all properties in class constructor

export class MyClass {
  a: number;
  b: number;

  constructor(obj: MyClass) {
    Object.assign( this, obj );
  }

  get c() : number {
      return this.a + this.b;
  }
}

And in map simply create new entity of MyClass

...
.map( data => new MyClass( data as MyClass ) )
...

edited Mar 27, 2018 at 10:59

answered Mar 27, 2018 at 10:27

Mixalloff

8374 silver badges10 bronze badges

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

1 Comment

Troels Larsen Over a year ago

@H.B. beat you to it, but that is a much better solution for simple cases, thanks.

brunnerh · Accepted Answer · 2018-03-27 10:08:16Z

1

Angular has no access to the generic type arguments like that. It's just a compiler annotation. In cases of JSON mapping, i tend to write a static parse function in the target class and then just map the plain object over that.

If you do not mangle class names and properties, you can use key iteration to automatically map properties to some degree (only works well for simple types without much additional code).

answered Mar 27, 2018 at 10:08

brunnerh

188k30 gold badges362 silver badges434 bronze badges

2 Comments

Troels Larsen Over a year ago

Ah.. Not the answer I was hoping for, but an answer none the less, thanks :) (I'll accept later when I'm allowed to)

brunnerh Over a year ago

In simple cases like this, Object.assign actually gets you there already: Object.assign(new MyClass(), d).

Collectives™ on Stack Overflow

How to map JSON to TypeScript objects with calculated properties

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related