Un grand merci pour votre visite !
Obtenez le guide ultime pour bien débuter en programmation !

- Choisissez la meilleure approche pour apprendre à coder
- Découvrez comment rester motivée
- Une astuce unique pour devenir un-e meilleur-e développeur-euse
Une fois votre service mis en place, avec @Injectable, nous souhaitons donc récupérer des données json, venant d’une API.
Nous allons donc utiliser HttpClient d’Angular (certain-e-s d’entre vous connaissent son grand frère : le Http).
Pour faire une requête REST vers une API pour obtenir des éléments, nous avons le choix de la méthode :
A votre avis, laquelle utiliser ? GET, vous avez gagné !
Ainsi, ils l’ont bien fait avec HttpClient, vous allez utiliser la méthode : get.
Ce qui donne :
this._httpClient.get(…
Nous pouvons aider le parser json du HttpClient, en lui précisant le type des données de retour :
this._httpClient.get<Potion[]>(url).
Nous utilisons ici la puissance des méthodes génériques (présentes en C#) et présentes en TypeScript.
Dans notre exemple, nous indiquons à notre HttpClient que le type de retour c’est un tableau de Potion.
Si vous venez d’un autre langage, comme par exemple C#, vous allez bien bien surpris du comportement de HttpClient et de la désérialization effectuée par Angular > TypeScript > javascript.
Si vous avez suivi le tutorial Angular, ou bien suivi nos derniers articles, vous avez remarqué que nous avons créé des classes, représentant nos modèles.
En voici un exemple :
export class Potion {
private _id: number;
private _name: string;
private _effet: string;
private _maListeIngredients: Ingredient[] = [];
public get maListeIngredients(): Ingredient[] {
return this._maListeIngredients;
}
public set maListeIngredients(value: Ingredient[]) {
if (typeof value === ‘undefined’ || value == null) {
console.log(‘est undefined !!’);
value = [];
}
console.log(‘maListeIngredients’);
this._maListeIngredients = value;
}
public get id(): number {
return this._id;
}
public set id(value: number) {
this._id = value;
}
public get name(): string {
return this._name;
}
public set name(v: string) {
this._name = v;
}
public get effet(): string {
return this._effet;
}
public set effet(v: string) {
this._effet = v;
}
public toUpper(): string {
console.log(‘toUpper’);
return this._name.toUpperCase();
}
}
Vous noterez que la classe a bien des propriétés publiques (des getteurs, et des setteurs).
Ici, tout est ok. Tout semble parfait … attendez la suite.
En fait, le deserializer de HttpClient n’utilise tout bonnement pas votre classe pour instancier les éléments venant du json retourné !
Oui, vous m’avez bien lu !
Dans Angular, nous avons donc cette classe HttpClient.
Elle va parser le json.
Elle va utiliser le binding par prototypage, et non par instanciation d’une classe !
En somme, elle va :
Vous devez suivre ces deux étapes :
L’idée ici étant d’assigner l’instance de ce faux objet à notre instance en cours.
export class Potion {
private _id: number;
private _name: string;
private _effet: string;
private _maListeIngredients: Ingredient[] = [];
constructor(obj: any) {
Object.assign(this, obj);
}
Vous noterez l’utilisation du Object.assign.
On utilise ici le pipe, et le map.
Nous allons ici, recréer nos vrais objets, avec notre vraie classe, et pour chaque item de la liste récupérée, assigner les valeurs à nos propres instances.
Ca nous donne dans la méthode getAll de notre service :
getAll(): Observable <Potion[]> {
const returnList: Potion[] = [];
const url = environment.api_url;
return this._httpClient.get<Potion[]>(url)
.pipe(
map(function(list: Potion[]): Potion[] {
list.forEach(item => returnList.push(new Potion(item)));
return returnList;
})
);
}
And voilà !
Votre guide GRATUIT pour bien débuter la programmation !
Tout ce qu'il faut pour bien démarrer ! 🙂
Un grand merci pour votre visite !
Obtenez le guide ultime pour bien débuter en programmation !
Inscrivez-vous pour obtenir votre guide !
GRATUIT - Ta newsletter - Inscris-toi vite ! Des astuces, des nouveautés, rien que pour toi !