J'essaie de trouver le meilleur moyen de convertir l'objet json en objet TypeScript . J'ai un service http get qui renvoie une liste d'utilisateurs . Ma version actuelle fonctionne. J'ai ajouté la fonction JSON à tous mes classes de modèle pour faire le mappage fonctionne:
export class User {
constructor(
public pk: number,
public username: string,
public first_name: string,
public last_name: string,
public email: string,
public profile: UserProfile, ) {
}
static fromJSON(json: any): User {
let user = Object.create(User.prototype);
Object.assign(user, json);
user.profile = UserProfile.fromJSON(json.profile);
return user;
}
}
Ça marche bien. Mais il y a quelque chose que je ne comprends pas dans la doc angulaire 2. Dans le didacticiel des héros, le JSON est automatiquement converti en objet de la manière suivante:
getHeroes (): Observable<Hero[]> {
return this.http.get(this.heroesUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
Je n'arrive pas à faire fonctionner cette méthode sur mon cas, je dis que body.data
est indéfini . Cette méthode fonctionne-t-elle vraiment?
MODIFIER:
Mon service http ne renvoie pas un tableau d'utilisateurs. Il retourne une page contenant un tableau d'utilisateurs dans sa propriété 'results'.
{
"count": 2,
"next": null,
"previous": null,
"results": [
{
"pk": 48,
"first_name": "Jon",
"last_name": "Does",
"profile": {
"pk": 46,
"gender": "U"
}
},
{
"pk": 47,
"first_name": "Pablo",
"last_name": "Escobar",
"profile": {
"pk": 45,
"gender": "M"
}
}
]
}
Mon code de service:
private extractData(res: Response) {
let body = res.json().results;
return body || {}; //<--- not wrapped with data
}
search(authUser: AuthUser, terms: string): Observable<User[]> {
let headers = new Headers({
'Content-Type': 'application/json',
'X-CSRFToken': this.cookiesService.csrftoken,
'Authorization': `Token ${authUser.token}`
});
let options = new RequestOptions({ headers: headers });
return this.http.get(environment.server_url + 'user/?search=' + terms, options)
.map(this.extractData);
// .map((response: Response) => response.json());
}
Mon code de composant de recherche:
onSearch(terms: string) {
this.searchService.search(this.user, terms).subscribe(
response => {
console.log(response); // Return array of object instead of array of user
},
error => {
console.log(JSON.stringify(error));
},
() => { }
);
}
EDIT 2:
Pour rendre ce cas plus facile, j'ai écrit ce code simple:
test(){
let json_text=` [
{
"id": 1,
"text": "Jon Doe"
},
{
"id": 1,
"text": "Pablo Escobar"
}
]`;
console.log(<MyObject[]>JSON.parse(json_text)); // Array of objects
console.log(MyObject.fromJSON(JSON.parse(json_text))); // Array of 'MyObject'
}
export class MyObject{
id: number;
text: string;
static fromJSON(json: any): MyObject {
let object = Object.create(MyObject.prototype);
Object.assign(object, json);
return object;
}
}
console.log(<MyObject[]>JSON.parse(json_text))
renvoie une liste d'objetsconsole.log(MyObject.fromJSON(JSON.parse(json_text)))
renvoie une liste de MyObjectC'est parce que dans Angular tutorial, json est dans la propriété data.
Comme indiqué dans le tutoriel
Ne faites aucune hypothèse à propos de l'API du serveur. Tous les serveurs ne renvoient pas un objet avec une propriété de données.
Si vous n’enveloppez pas votre json avec une propriété, vous pouvez simplement
private extractData(res: Response) {
let body = res.json();
return body || { }; //<--- not wrapped with data
}
Mettre à jour:
Code composant
onSearch(terms: string) {
this.searchService.search(this.user, terms).subscribe(
(response: SearchResponse) => { // <--- cast here
console.log(response);
},
error => {
console.log(JSON.stringify(error));
},
() => { }
);
}
Je suis assez en retard sur ce sujet mais je me suis retrouvé dans le même problème. J'apprends Angular et je veux convertir le JSON reçu du serveur HTTP en mon objet de modèle.
Classe de service
var ele:User;
let k=this.http.get<User>(url).subscribe(data => {
ele=data;
console.log(ele.count);
console.log(ele.results[0].first_name);
console.log(ele.results[0].profile.gender);
}
);
Mon modèle pour conserver les informations de JSON
export interface User{
count: string;
next: string;
previous: string;
results: Result[];
}
export interface Result{
pk: string;
first_name: string;
last_name: string;
profile:Profile;
}
export interface Profile{
pk: string;
gender:string;
}
Et c'est ça. J'utilise Angular 6 pour analyser JSON en objet