web-dev-qa-db-fra.com

Angulaire2. Mapper la réponse http à une instance d'objet concret

Une approche courante pour traiter la réponse http est la suivante:

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

qui vous fournit un Observable<Object[]> où Object est créé de manière dynamique à partir de la désérialisation json . Vous pouvez ensuite utiliser ce résultat dans *ngFor="let item of result | async" etc ...

J'aimerais obtenir une instance de type spécifique (c'est-à-dire l'utilisation de l'opérateur new pour appeler le constructeur du type) . Vous avez essayé différentes manières d'obtenir ce résultat:

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

mais en obtenant cette erreur: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Cela semble fonctionner, mais c'est beaucoup trop compliqué et probablement pas efficace:

.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;
}

Merci!

jsonangularrxjsangular-http
5
rook

Si vous connaissez le type d'objets que vous souhaitez déconstruire à partir du JSON (ce que vous faites probablement), vous pouvez créer une méthode statique qui renvoie une instance à partir de Object.

class MyClass {

  prop: number;

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

Puis convertissez la réponse JSON en instances de 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')
  );

Comment ça marche:

  1. .map(val => JSON.parse(val)) Convertit simplement la réponse en JSON, qui est un tableau d'objets.

  2. .exhaustMap(val => new Rx.Observable.from(val)) Convertit chaque valeur en observable et exhaustMap les aplatit afin que chaque objet du JSON soit émis séparément.

  3. .map(val => MyClass.fromObject(val)) Utilisez à nouveau map pour convertir chaque objet en une instance de MyClass.

Voir la démo en direct: http://jsfiddle.net/f5k9zdh1/1/

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

Essayez cette syntaxe, vous la transposez dans votre objet:

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