JSONからオブジェクトへのAngular2の解析

Question

私のjsonオブジェクトをTypescriptオブジェクトにキャストする最善の方法を見つけようとしています。 私は、ユーザーのリストを返すhttp getサービスを持っています。 私の現在のバージョンの作品は、私はマッピングを行うためにすべての私のモデルクラスにJSON関数から追加した作品：うまく機能

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

を。しかし、私は角度2の文書にはないものがあります。英雄のチュートリアルでは、JSONは、自動的にこの方法をオブジェクトにキャストされます。

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

私はこの方法が私の場合で動作するように得ることができない、私はbody.dataが未定義であることを述べています。 このメソッドは実際に動作しますか？

EDIT：

マイHTTPサービスは、ユーザーの配列を返していません。これは、 'results'プロパティにユーザーの配列を含むページを返します。

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

マイサーチ・コンポーネント・コード：

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：

この場合は、簡単にするために、私が書いてきたこの

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

マイサービスコード

シンプルコード：

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))オブジェクト
• console.log(MyObject.fromJSON(JSON.parse(json_text)))のリストを返す角度チュートリアルでは、JSONはデータプロパティであるためですMyObjectに

Answer 1

の リストを返します。チュートリアル

で述べたように

は、サーバーのAPIに関する仮定を行いません。すべてのサーバーがdataプロパティを持つ オブジェクトを返すわけではありません。

あなたがちょうど

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

アップデート使用することができます任意のプロパティを使用してJSONをラップしていない場合は、次の

コンポーネントのコード

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