title: Deserializing json in Angular 2/4 using HttpClientModule
body: <p>So I'm getting the following JSON structure from my <code>asp.net core</code> api:</p>
  
  <pre><code>{
    "contentType": null,
    "serializerSettings": null,
    "statusCode": null,
    "value": {
       "productName": "Test",
       "shortDescription": "Test 123",
       "imageUri": "https://bla.com/bla",
       "productCode": null,
       "continuationToken": null
    }
  }
  </code></pre>
  
  <p>I have the following typescript function that invokes the API to get the above response:</p>
  
  <pre><code>public externalProduct: ProductVM;
  
  
  getProductExternal(code: string): Observable&lt;ProductVM&gt; {
      return this.http.get("api/product?productCode=" + code)
          .map((data: ProductVM) =&gt; {
              this.externalProduct = data; //not working...
              console.log("DATA: " + data);
              console.log("DATA: " + data['value']);
              return data;
          });    
  }
  </code></pre>
  
  <p>ProductVM:</p>
  
  <pre><code>export interface ProductVM {
  
      productName: string;
      shortDescription: string;
      imageUri: string;
      productCode: string;
      continuationToken: string;
  }
  </code></pre>
  
  <p>My problem is that I can't deserialize it to <code>ProductVM</code>. The console logs just produce <code>[object Object]</code></p>
  
  <p>How can I actually map the contents of the <code>value</code> in my json response to a <code>ProductVM</code> object?</p>
  
  <p>Is it wrong to say that <code>data</code> is a <code>ProductVM</code> in the map function? I have tried lots of different combinations but I cannot get it to work!</p>
  
  <p>I'm unsure whether I can somehow automatically tell <code>angular</code> to map the value array in the <code>json</code> response to a <code>ProductVM</code> object or if I should provide a constructor to the <code>ProductVM</code> class (it's an interface right now), and extract the specific values in the <code>json</code> manually?</p>