Angular2 l'analyse de JSON pour objet

J'essaie de trouver la meilleure façon d'exprimer mon objet json à Tapuscrit de l'objet.
J'ai un http get service qui renvoie une liste d'utilisateur.
Ma version actuelle fonctionne, j'ai ajouté de JSON à toutes mes classes de modèle pour faire de la cartographie des travaux:

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

Qui fonctionne bien. Mais il y a quelque chose que je ne comprends pas dans l'angle de 2 doc. Sur les héros tutoriel, le JSON est automatiquement intégré à l'objet de cette façon:

  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 ne peux pas obtenir cette méthode pour travailler sur mon cas, j'ai dit que body.data est pas défini.
Cette méthode fonctionne vraiment?

EDIT:

Mon service http n'est pas retourne un tableau d'utilisateurs. Il renvoie une page qui contient un tableau des utilisateurs dans ses "résultats" de la propriété.

{
  "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 composant de la recherche de code:

 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:

À faire à 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

OriginalL'auteur Ben | 2016-10-16

3

C'est parce que dans Angulaire tutoriel, json est dans la propriété data.

Comme indiqué dans le tutoriel

Faire aucune hypothèse sur le serveur de l'API. Pas tous les serveurs de retour d'un
objet avec une base de données de la propriété.

Si vous n'êtes pas d'emballage de votre json avec une propriété que vous pouvez simplement utiliser
```
private extractData(res: Response) {
  let body = res.json();
  return body || { }; //<--- not wrapped with data
}
```
Mise à jour:

Code du 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 vous remercie. Avec votre modification, il renvoie une liste de Object au lieu d'une liste de User. Est-il un moyen de le réparer?
Pouvez-vous ajouter le code de votre service?
J'ai édité mon post
Essayez décommentant la deuxième carte .map((res) => {res.result = <User>res.result});
Elle renvoie un vide json {}

OriginalL'auteur Sefa

Je suis très en retard à ce sujet, mais trouvé mon auto dans la même question . Je suis en train d'apprendre Angulaire et que vous voulez convertir en JSON reçu de serveur HTTP pour mon modèle objet .

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 la tenue de l'information 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 ce qu'il est. Je suis à l'aide Angulaire 6 pour l'analyse JSON pour Objet

OriginalL'auteur Geek

Vous devez vous connecter pour publier un commentaire.