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à !
Une newsletter pleine de curiosité ça vous dit ?!
Les dernières news sur .net, C#
Des astuces de code
Comment améliorer la qualité dans vos logiciels
Des news sur angular, vuejs, typescript, ...
Vous êtes bloqué-e ? Difficile de progresser ?
Vous avez besoin de passer des étapes ?
Vous souhaitez enfin réussir à bien coder ?
Nous non plus on n'aime pas les spams. Votre email est gardé bien au chaud, pour des infos autour du code, de la formation, et des news de devtobecurious, c'est tout :)
GRATUIT - Ta newsletter - Inscris-toi vite ! Des astuces, des nouveautés, rien que pour toi !