[Angular 2] Exploiter convenablement la donnée depuis rest

Version imprimable

Bonsoir,

j'essaye de récupérer une liste de matière depuis un servuer REST, voici la méthode qui se charge de faire la requete GET:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
    getAllMatieres():<Observable>Sommaire[]{
        let matieres:sommaire;
        this.loading = true;
 
        return  this._matieres = this.http.get('http://192.168.0.11:8000/api').subscribe((res: Response) => {
 
            console.log("reponse depuis serveur rest");
            this._matieres = res._body;
            console.log(res._body);
            this.loading = false;
 
 
          });
 
    }

j'ai la composante qui liste les matières, elle appelle cette méthode depuis un manager comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent {
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
                   this.matieres = this.matiereService.getAllMatieres();
       console.log("====>",this.matieres);
    }

voici la console de firebug:

http://profoad.education/moodle3/the...isoir/vide.png

je pense que je ne dois pas faire correctement les choses à récupérer convenablement les données .
mon but est de récupérer est d'envoyer cette donnée à la vu pour lister les matières comme cecil:

Code:

1
2
3
4
5
6
 
 
<div class="row" *ngFor="let matiere of matieres">
    <div class="col-sm-8">
        <h4>{{matiere.id}}: {{matiere.name}}</h4>
    </div>

Auriez vous une idée de faire ça correctement ? merci de vos réponse :)

en effet, les choses ne sont pas faites correctement.
après le GET, il faut mapper ( .map(.....)) le résultat avec un modèle.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
// Fetch all existing comments
     getComments() : Observable<Comment[]> {
 
         // ...using get request
         return this.http.get(this.commentsUrl)
                        // ...and calling .json() on the response to return data
                         .map((res:Response) => res.json())
                         //...errors if any
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
 
     }

Code:

1
2
3
4
5
6
7
8
9
 
/* * * ./app/comments/model/comment.ts * * */
export class Comment {
    constructor(
        public id: Date, 
        public author: string, 
        public text:string
        ){}
}

merci dukoid :),

je comprend maintenant pourquoi on utilise map, il va charger les données du serveur sur les attributs de la classe modèle,

voici mon modèle sommaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
export class Sommaire{
 
    id:number;
    name:string;
 
    static matieres:Sommaire[] = [
        { id:1, name: 'Informatique' },
        { id:2, name: 'Electronique' },
        { id:3, name: 'Infographie' },  
        ];
}

voici ce que je recois du serveur rest:

Code:

1
2
 
[ { id: 0, name: 'test', _id: 5872c8a07818ed18bac248f6 } ]

j'ai donc ajouter _id dans le modèle, c'est le numéro aléatoire de mongo ce qui donne:

Code:

1
2
3
4
5
6
7
8
 
export class Sommaire{
    constructor(public id:number,public name:string,public _id:string){
        console.log("mappage de la donner ok");
    }
 
    //static matieres:Sommaire[] =[{"id":0,"name":"test","_id":"5872c8a07818ed18bac248f6"}];
}

maintenant j'ai essayer de faire ce que tu m'as donner:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
import {Injectable} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class SommaireGestionService{
   // private _matieres = Sommaire.matieres.slice(0);
    private _matiereNow:Sommaire; //mémorise matière courant auquel on a sélectionner
 
    constructor(private http:Http){
        console.log('service gestion sommaire initialiser ...');
    }
    getAllMatieres():Observable<Sommaire[]>{
                 // ...using get request
         return this.http.get('http://192.168.0.11:8000/api')
                         .map((res:Response) => res.json())
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
 
       // return this._matieres.slice(0);
    }

c'est cette erreur:

Code:

1
2
3
4
5
6
 
EXCEPTION: Error in app/app.template.html:2:8 caused by: this.http.get(...).map(...).catch is not a function core.umd.js:2837:1
 
ORIGINAL EXCEPTION: this.http.get(...).map(...).catch is not a function core.umd.js:2839:1
 
ORIGINAL STACKTRACE:

j'ai essayer de faire ceci: ( () => {} )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html'
})
 
export class SommaireComponent {
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
    ()=>{
        this.matieres = this.matiereService.getAllMatieres(); 
    }
 
     }

je n'ai plus l'erreur mais j'ai pas mon test "mappage de la donnée ok":

Code:

1
2
3
4
 
    constructor(public id:number,public name:string,public _id:string){
        console.log("mappage de la donnée ok");
    }

le mappage n'a pas fonctionner ?

la console me donne ceci:

Code:

1
2
3
 
service gestion sommaire initialiser ... sommaire-gestion.js:17:9
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

2 pièce(s) jointe(s)

Pour le moment je laisser tomber le map car cela perturbe tout mon code:aie: et j'aimerais avant tout comprendre comment on utilise l'observable.
Mon ancien code fonctionnais, mais le problème c'est que au premier chargement de la liste j'ai aucune matière, si j'ajoute une autre matière, la liste est chargé

Pièce jointe 235107

J'ai modifier mon code pour uniquement récupérer les data sous forme d'observable

Pièce jointe 235102

Voici la méthode qui charge les datas depuis mongodb ma requête REST:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
    getAllMatieres():Observable<Sommaire[]>{
        this.loading = true;
      return  this.http.get('http://192.168.0.11:8000/api').subscribe(
 
            //parametre 1 = la réponse de la requete obesvable
            (res: Response) => {
                console.log(res.json());
                this._matieres = res.json();
            },
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function() { 
                console.log("the subscription is completed");
                this.loading = false;
            }
 
        );
 
    }

voici le composant qui va charger les datas:

Code:

1
2
3
4
5
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
        console.log("attendre que l'observable retourne les matirères");
       console.log(this.matiereService.getAllMatieres());
    }

quel est le nom de l'objet que je récupère quel est la méthode qui permet de dire que la réquête à été bien chargé ?
peut t'on faire attendre le constructeur pour avoir les données je pensais quelque chose de ce genre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent {
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
                let fluxObs = this.matiereService.getAllMatieres();
                let endLoad =fluxObs.laMethodeNonConnue.isTerminé;
               tantQue(endLoad == ture){
                    attendre le résultat
                 }
 
               continuer le constructor
    } 
 
    ajoutMat() {
 
        this.onAdd.emit(this.nomMatiere);
    }
 
    editMat(matiere:Sommaire) {
        this.matiereService.setMatiereNow(matiere);//sauvegarde en mémoire la matière à editer
       this.onEdit.emit(null);
    }
 
    suppr(id:number){
       this.matiereService.kilMat(id);
       this.matieres = this.matiereService.getAllMatieres();
        this.onLst.emit(null);
    }
}

map ne perturbe en rien le code.
Code:

1 2 import 'rxjs/add/operator/catch';
ou tu enleves .catch(....) pour tester

l'appel du service ce fait ainsi :
Code:

1 2 3 4 5 6 7 matieres: any; ... ngOnInit() { this.xxxxxxService.getAllMatieres().subscribe(data => this.matieres = data); }

en fait ça perturbe car les autres méthodes s'attent à avoir un attribut static matiere,
je vais faire autrement:

j'ai créer un autre modèle que j'appelle data.ts:

Code:

1
2
3
4
5
6
7
8
 
export class Data {
    constructor(
        public id: number, 
        public name: string, 
        public _id:string
        ){}
}

je remet la donnée que j'ai sous mongodb:

Code:

1
2
3
4
5
 
  { id: 0, name: 'test2', _id: 587ae4c6fd91045ab7a73a76 },
  { id: 0, name: 'test3', _id: 587ae4dcfd91045ab7a73a77 },
  { id: 0, name: 'test1', _id: 587ae506fd91045ab7a73a78 },
  { id: 0, name: 'gfh', _id: 587af669fd91045ab7a73a79 } ]

dans mon manager , j'ai créer une autre méthode getRstMatiere() auquel je réutilise la méthode map()

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 
import {Injectable} from '@angular/core';
import {Sommaire} from './sommaire-data';
import { Http, Response,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
 
import {Data} from './data';
 
@Injectable()
 
export class SommaireGestionService{
    private _matieres = Sommaire.matieres.slice(0);
    private _matiereNow:Sommaire; //mémorise matière courant auquel on a sélectionner
    private loading:boolean;
    private _urlRest :string = 'http://192.168.0.11:8000/api';
 
    constructor(public http: Http) {
    }
 
    getAllMatieres():Sommaire[]{
        return this._matieres.slice(0);
    }
 
 
 
    getRstMatieres():Observable<Data[]>{
        this.loading = true;
      return  this.http.get('http://192.168.0.11:8000/api').map(
 
            //parametre 1 = la réponse de la requete obesvable
            (res: Response) => {
                console.log(res.json());
               // this._matieres = res.json();
            },
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function() { 
                console.log("the subscription is completed");
                this.loading = false;
            }
 
        );
 
    }

à la compilation j'ai cette erreur:

Code:

1
2
3
 
app/sommaire/sommaire-gestion.ts(27,15): error TS2346: Supplied parameters do not match any signature of call target.
app/sommaire/sommaire-gestion.ts(36,22): error TS7006: Parameter 'error' implicitly has an 'any' type.

mon modèle est t'il correcte, quel est le souci ? il n'arrive pas hydrater les attribut de la classe Data ?

dans l'observable il faut mettre any pour un retour sous forme de tableau
Code:

1 2 3 getRstMatieres():Observable<any>{ this.loading = true;
le problème c'est que tu fais tout en même temps. voici comment decomposer les choses avec la bonne pratique :

* un service httpService qui propose 4 fonctions : get, post, put, delete (se sont des get, post.... générique)
* un service MatiereService qui propose des fonctions pour récupérer des données ( par exemple getAllMatiere() ou getMatiere(id) ou setMatiere(...) ) . les fonctions vont faire appel au httpService->get ou ->post
* le composant (n'importe lequel) va faire appel à un fonction de serviceMatiere->getallMatiere()

.................... <AutoModel>........ <any>
component >> autoService >> httpService
............... <<<<<<<<<<<<<<<<<<< retour

EXEMPLE :

un component ou je veux récupérer la liste des voitures
Code:

1 2 3 4 5 ngOnInit() { this.autoService.list().subscribe(data => this.autos = data); } ...
autoService :
Code:

1 2 3 4 5 list(): Observable<Array<AutoModel>> { return this.httpService.get('/api/autos'); } ...
httpService :
Code:

1 2 3 4 5 6 7 8 9 10 11 ... headers: Headers = new Headers(); options: RequestOptions = new RequestOptions({ headers: this.headers }); baseUrl: string = 'http://url-de-api'; get(path: string): Observable<any> { return this.http.get(`${this.baseUrl}${path}`, this.options) .map(res => res.json()); } ...
j'ai tiré directement de mon code qui fonctionne parfaitement !

mais j'ai toujours la même erreur quand je mets any

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
 
    getRstMatieres():Observable<any>{
        this.loading = true;
      return  this.http.get('http://192.168.0.11:8000/api').map(
 
            //parametre 1 = la réponse de la requete obesvable
            (res: Response) => {
                console.log(res.json());
               // this._matieres = res.json();
            },
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function() { 
                console.log("the subscription is completed");
                this.loading = false;
            }
 
        );
 
    }

est ce que dans après la méthode map(), on doit aussi appeler subscribe ? (dans ton exemple tu ne l'avais pas mis).

15/01/2017, 14h40
dukoid

j'avais pas remarqué tout de suite dans ton code mais tu dois faire les choses en 3 étapes. relis mon message précédent, je l'ai modifié !

parceque il faut respecter cet ordre :
en 1) le json interprète la chaine de donnée reçu en tableau any
en 2) le tableau est mappé sur le modèle

Je vais donc faire la première étape ajouter la méthode ngOninit.

j'ai donc mon component sommaire component qui va lister les matières,
j'importe donc ngOnInit:

Code:

1
2
3
4
 
import {Component,Input,Output,EventEmitter,OnInit} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';

ensuite je fait implément OnInit:

Code:

1
2
3
4
5
6
7
8
9
 
export class SommaireComponent implements OnInit{
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();

puis j'ai testé ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
import {Component,Input,Output,EventEmitter,OnInit} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent implements OnInit{
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
 
    } 
 
    ngOnInit() {
       console.log("ng on init *********");
     let wbs =  this.matiereService.list();
     console.log(wbs);
    }

voici la méthode list() qui se trouve dans le manager SommaireGestionService:

Code:

1
2
3
4
5
 
    list(): Observable<Array<Sommaire>> {
        console.log("obs");
        return  this.httpService;
    }

list() me retourn indefined ? est ce normal ? httpService est une méthode qui vient d'ou ? de HTTP je dois normalement voir Objet dans la console ?

Code:

1
2
3
 
 
import { Http, Response,Headers,RequestOptions } from '@angular/http';

voici la sortie console:

Code:

1
2
3
4
5
 
ng on init ********* sommaire.component.js:21:9
obs sommaire-gestion.js:24:9
undefined sommaire.component.js:23:9
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

Edit:

javais pas vu la suite , je m'étais arrêter à mon erreur, c'était le httpService, je vais testé ça ...

Mon script récupère enfin le flux, en fait depuis le debut cela fonctionne pas car au début je me suis dit que map() était une fonctionne javascript pure,
j'avais regarder cette page:
Code:

1 2 https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Map
mais en fait je crois que ce n'est pas le même map, il a fallut ajouter ceci:
Code:

1 2 3 import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map';
du coup si je faisais ceci:
Code:

1 2 3 return this.http.get(this._urlRest, options) .map(res => res.json();
je me retrouvais avec cette erreur:
Code:

1 2 EXCEPTION: Error in app/app.template.html:2:8 caused by: this.http.get(...).map is not a function
et important operator map j'ai ceci:
Code:

1 2 console.log(this.matiereService.list().subscribe(data => this.matieres = data);
à la console j'ai enfin l'objet et l'erreur à disparu:
Code:

1 2 Object { closed: false, syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: false, isStopped: false, destination: Object, _subscriptions: Array[1] }
c'est pour cela que je tournais en rond et que cela fonctionnais jamais ....:cry:

en tout ca merci de tes bout de script, j'espère que je vais pouvoir avancer un peu dans mon tuto ...

15/01/2017, 19h55
dukoid

en effet, map fait partis de rxjx et il faut l'importer. je n'ai pas pensé le mentionner car cela était évident pour moi.

Quand on débute c'est pas facile de trouver le pb...

Mon problème d'affichage au démarrage à été résolut, j'ai toutes mes matières, maintenant j'ai un problème avec l'enregistrement d'une nouvelle matières.
La liste n'est pas alimenter d'une nouvelle matière, je suis obliger d'utiliser la touche F5 pour la prise en compte d'un nouveau élément.

voici le composant qui permet d'ajouter une matière:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
import {Component,Input,Output,EventEmitter} from '@angular/core';
import {SommaireGestionService} from './sommaire-gestion';
 
@Component({
    selector: 'ajout-matiere',
    templateUrl: './app/sommaire/sommaire-ajout.template.html',
 
})
 
export class AjoutMatiereComponent {
 
    @Output() onLst = new EventEmitter();
    @Input()  nomMatiere: string;
 
 
    constructor(private sommaireService: SommaireGestionService) {
    }
 
    saisirMat(matiere:string){
            console.log("appelle addMatiere");
 
            this.sommaireService.addMatiere({id: 0, name:this.nomMatiere}).subscribe(
 
            //parametre 2 = en cas d'erreur
            function(error) { 
                console.log("Error happened" + error)
 
            },
 
            //parametre 3 = la réponse de la requete obesvable
            function(complete) { 
                console.log(complete);
            }
 
        );;
            this.onLst.emit(null);//revenir à la liste des matières
 
    }
 
    annuler(){
        this.onLst.emit(null);
    }
 
}

dans le manager la requête POST:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
    addMatiere(newMatiere: Sommaire) {
 
        console.log("Ajouter matière",newMatiere);
 
        let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
        let options       = new RequestOptions({ headers: headers }); // Create a request option
 
        return this.http.post(this._urlRest, newMatiere,options);
 
    }

add matière est appeller sur le composante parent (ajoutMat):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
import {Component,Input,Output,EventEmitter,OnInit} from '@angular/core';
import {Sommaire} from './sommaire-data';
import {SommaireGestionService} from './sommaire-gestion';
 
 
@Component({
    selector: 'table-matiere',
    templateUrl: './app/sommaire/sommaire.template.html',
 
})
 
export class SommaireComponent implements OnInit{
    matieres:Sommaire[];
 
    nomMatiere:string;
 
    @Output() onAdd = new EventEmitter();
    @Output() onEdit = new EventEmitter();
    @Output() onLst = new EventEmitter();
 
 
    constructor(private matiereService:SommaireGestionService){ //recupère un sigleton service
 
    }
 
    ngOnInit() {
       console.log("ng on init *********");
       console.log(this.matiereService.getRstMatieres().subscribe((data)=>this.matieres = data));
    }
 
    ajoutMat():void{
        this.onAdd.emit(this.nomMatiere);
 
    }

je pense qu'il faudrait que j'appelle l'événement onLst une fois que observable est terminé

Code:

1
2
3
4
 
export class AjoutMatiereComponent {
 
    @Output() onLst = new EventEmitter();

je remets l'obeservable

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
    this.sommaireService.addMatiere({id: 0, name:this.nomMatiere}).subscribe(
 
        function(response) { console.log("Success Response" + response)},
        function(error) { console.log("Error happened" + error)},
        function() { 
            console.log("the subscription is completed");
        });
 
    }

comment je fais pour lancer cette événement ?

Code:

1
2
 
      this.onLst.emit(null);

le "this" de onLst n'est pas compris car est je pense en conflit avec this.sommaireService.
si mon code est:

Code:

1
2
3
4
5
6
 
 
        function() { 
            console.log("the subscription is completed");
      this.onLst.emit(null);
        });

j'ai cette erreur:

Code:

1
2
3
 
 
EXCEPTION: this.onLst is undefined