Discussion :

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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:




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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dukoid]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
        ){}
}

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[keokaz]

Pour le moment je laisser tomber le map car cela perturbe tout mon code 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é



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




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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dukoid]

map ne perturbe en rien le code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
import 'rxjs/add/operator/catch';

ou tu enleves .catch(....) pour tester



l'appel du service ce fait ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?