title: Angular2 parsing from JSON to object
body: <p>I'm trying to find the best way to cast my json object to Typescript object.
  I have a http get service which returns a list of user.
  My current version works, I have added from JSON function to all my model classes to make the mapping works:</p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>That works well. But there is something I don't get in the angular 2 doc.  On the heroes tutorial, the JSON is automatically casted to object this way:</p>
  
  <pre><code>  getHeroes (): Observable&lt;Hero[]&gt; {
      return this.http.get(this.heroesUrl)
                      .map(this.extractData)
                      .catch(this.handleError);
    }
    private extractData(res: Response) {
      let body = res.json();
      return body.data || { };
    }
  </code></pre>
  
  <p>I can't get this method to work on my case, I says that <code>body.data</code> is undefined.
  Does this method really works?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>My http service doesn't returns an array of users. It returns a page which contains an array of users in its 'results' property.</p>
  
  <pre><code>{
    "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"
        }
      }
    ]
  }
  </code></pre>
  
  <p>My service code:</p>
  
  <pre><code> private extractData(res: Response) {
      let body = res.json().results;
      return body || {}; //&lt;--- not wrapped with data
    }
  
    search(authUser: AuthUser, terms: string): Observable&lt;User[]&gt; {
      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) =&gt; response.json());
    }
  </code></pre>
  
  <p>My search component code:</p>
  
  <pre><code> onSearch(terms: string) {    
      this.searchService.search(this.user, terms).subscribe(
        response =&gt; {       
            console.log(response); // Return array of object instead of array of user
        },
        error =&gt; {
            console.log(JSON.stringify(error));
        },
        () =&gt; { }
      );
   }
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>To make this case easier, I've wrote this simple code:</p>
  
  <pre><code>  test(){
      let json_text=` [
        {
          "id": 1,
          "text": "Jon Doe"
        },
        {
          "id": 1,
          "text": "Pablo Escobar"
        }
      ]`;
  
      console.log(&lt;MyObject[]&gt;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;
      }
  }
  </code></pre>
  
  <ul>
  <li><code>console.log(&lt;MyObject[]&gt;JSON.parse(json_text))</code> returns a list of Objects</li>
  <li><code>console.log(MyObject.fromJSON(JSON.parse(json_text)))</code> returns a
  list of MyObject</li>
  </ul>