Angular2. Map http response to concrete object instance

Question

Сommon approach to process http response is like that:

return this._http.get(url)
           .map((res: Response) => res.json());

which provides you with an Observable<Object[]> where Object is dynamically created type from json de-serialization. Then you can use this result in *ngFor="let item of result | async" etc...

I'd like to get a specific type instance (meaning using new operator to call the type's constructor). Tried different ways to achieve something like that:

.map((res: Response) => { let obj = res.json(); return new MyObject(obj.id, obj.name);})

but getting this error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

This way seems to work but it's way too complicated and probably not effective:

.map((res: Response) => {
    let results = <MyObject[]>[];
    let obj = res.json();
    obj.forEach(
        function (o: any) {
            results.push(new MyObject(o.id, o.name));
        }
    );
    return results;
}

Thanks!

@GünterZöchbauer I need to find a time to go through these posts. I hoped there's something built into Observable too achieve that. I updated my question with the the way which seems to work but I don't like it. — rook
– rook, Commented Sep 10, 2016 at 21:58

martin · Accepted Answer · 2016-09-11 13:25:31Z

2

If you know what type of objects you want to deconstruct from the JSON (which you probably do) you can create a static method that returns an instance from Object.

class MyClass {

  prop: number;

  static fromObject(src: Object) {
    var obj = new MyClass();
    obj.prop = src.prop;
    return obj;
  }
}

Then convert the JSON response to instances of MyClass:

Rx.Observable.of('[{"prop":1},{"prop":2},{"prop":3}]')
  .map(val => JSON.parse(val))
  .exhaustMap(val => new Rx.Observable.from(val))
  .map(val => MyClass.fromObject(val))
  .subscribe(
    item => console.log('Next: ', item),
    error => console.log('Error:', error),
    _ => console.log('Completed')
  );

How this works:

.map(val => JSON.parse(val)) Just converts the response to JSON which is an array of objects.
.exhaustMap(val => new Rx.Observable.from(val)) Converts each value to an Observable and exhaustMap flattens them so each object from the JSON will be emitted separately.
.map(val => MyClass.fromObject(val)) Use map again to convert each Object to an instance of MyClass.

See live demo: http://jsfiddle.net/f5k9zdh1/1/

edited Sep 11, 2016 at 13:25

answered Sep 11, 2016 at 11:55

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

1 Comment

rook Over a year ago

Interesting. Still too much code to my taste ;) but I'll take a deeper look. Thanks.

James A Mohler · Accepted Answer · 2017-01-05 01:25:28Z

2

.map((res: Response) => res.json().map(obj => new MyObject(obj.id, obj.name)))

edited Jan 5, 2017 at 1:25

James A Mohler

11.1k15 gold badges51 silver badges76 bronze badges

answered Jan 5, 2017 at 1:00

lps540

291 bronze badge

1 Comment

ad absurdum Over a year ago

Code-only answer are not helpful. Please attempt to explain how your code solves OP's problem. Others who find this question through search may not be as experienced as you; help them understand your answer.

John Baird · Accepted Answer · 2016-09-10 21:43:21Z

0

Try this syntax, you cast it to your object:

 this.http.post(this.constants.taskUrl + parm, { headers: headers })
            .map((response: Response) => {
                var res = response.json();
                var result = <DataResponseObject>response.json();
                return result;
            })

answered Sep 10, 2016 at 21:43

John Baird

2,6761 gold badge17 silver badges34 bronze badges

1 Comment

rook Over a year ago

The deal here is that response.json() gives you an array of objects. I updated my question with the way that seems to work but I don't like that way.

Collectives™ on Stack Overflow

Angular2. Map http response to concrete object instance

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related