web-dev-qa-db-fra.com

Angular2 analyse de JSON à l'objet

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'objets
  • console.log(MyObject.fromJSON(JSON.parse(json_text))) renvoie une liste de MyObject
jsonobjectangularcasting
8
Ben

C'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));
      },
      () => { }
    );
 }
3
Sefa

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

0
Geek