Angular2 Parsing von JSON zu Objekt

Question

Ich versuche, die beste Möglichkeit zu finden, mein Json-Objekt zu Typescript-Objekt zu konvertieren. Ich habe einen http get Service, der eine Liste von Benutzern zurückgibt. Meine aktuelle Version funktioniert, habe ich von JSON-Funktion, um alle meine Model-Klassen hinzugefügt, um die Zuordnung zu machen funktioniert:

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

, das gut funktioniert. Aber da ist etwas, was ich nicht in den eckigen 2 Doc. Auf den Helden-Tutorial wird die JSON automatisch auf diese Weise zum Objekt gegossen:

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

ich nicht diese Methode bekommen kann auf meinem Fall zu arbeiten, sage ich, dass body.data nicht definiert ist. Funktioniert diese Methode wirklich?

EDIT:

Mein http-Dienst gibt nicht eine Reihe von Benutzern. Es gibt eine Seite zurück, die ein Array von Benutzern in der Eigenschaft 'results' enthält.

{ 
    "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" 
     } 
    } 
    ] 
} 

Mein Service-Code:

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

Meine Suche Komponentencode:

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:

dieser Fall einfacher zu machen, habe ich dies schrieb einfacher Code:

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)) gibt eine Liste von Gegenständen
• console.log(MyObject.fromJSON(JSON.parse(json_text))) gibt eine Liste von MyObject

Answer 1

Es ist, weil in Angular Tutorial, json in der Dateneigenschaft ist.

Wie in der Anleitung angegeben

Machen Sie keine Annahmen über die Server-API. Nicht alle Server geben ein -Objekt mit einer Dateneigenschaft zurück.

Wenn Sie nicht Ihre Json mit jeder Eigenschaft Umwickeln Sie können mithilfe

private extractData(res: Response) { 
    let body = res.json(); 
    return body || { }; //<--- not wrapped with data 
} 

Update:

Komponentencode

onSearch(terms: string) {  
    this.searchService.search(this.user, terms).subscribe(
     (response: SearchResponse) => { // <--- cast here 
      console.log(response); 
     }, 
     error => { 
      console.log(JSON.stringify(error)); 
     }, 
    () => { } 
    ); 
}