JSON parsing in rxjs ajax callback not working

Question

I am trying to parse a JSON string in ajax callback in Angular2.
After I call response.json())and do console.log(), it works great.

This is the JSON I'm trying to parse:

{
  "success": true,
  "data": {
    "id": "14cf4717-f5b6-4002-96b2-321324fc4077",
    "number": "1234",
    "sections": [
      {
        "id": "53f43dd7-4c93-4925-a51d-c6f81f314275",
        "description": "Test",
        "created_at": "2017-10-07 15:08:01",
        "updated_at": "2017-10-07 15:08:01",
        "lines": [
          {
            "id": "73fab07f-4401-43a4-99a4-13c891907ea7",
            "product_id": "62aa5388-712d-4ab1-9e64-6849889194d1",
            "product_name": "Product",
            "product_description": "test",
            "product_type": "product",
            "quantity": "1.00",
            "product": {
              "id": "62aa5388-712d-4ab1-9e64-6849889194d1",
              "name": "Product",
              "description": "test"
            }
          }
        ]
      }
    ],
    "notes": []
  }
}

In this function:

 public getQuotation(quotationId: string, callback: Function) {
    this.http.get('/quotation/' + quotationId).subscribe((response) => {

      const responseJson = response.json();
      console.log(responseJson);

      callback(null);
    }, () => {
      callback(null);
    });
  }

The result is as expected:

But when I add this line below console.log() : const quotation = <FinBaseModel>(responseJson.data);

public getQuotation(quotationId: string, callback: Function) {
    this.http.get('/quotation/' + quotationId).subscribe((response) => {

      const responseJson = response.json();
      console.log(responseJson);

       const quotation = <FinBaseModel>(responseJson.data);

      callback(quotation);
    }, () => {
      callback(null);
    });
  }

Then the array is linesempty ...

I do not understand how this is possible, because I do console.log()before trying to apply it toFinBaseModel

Does anyone know how this is possible and how I can fix it?

Answer 1

Instead of using JSON.parse you can do this:

this.http.get('/quotation/' + quotationId)
    .map(response=> response.json())
    .subscribe((responseData) => {
         console.log(responseData);
    });

Answer 2

console.log . , , .

console.log(responseJson.data) 
const quotation = <FinBaseModel>(responseJson.data);
callback(quotation);

Answer 3

, , . : , , , , . console.log(response.data) console.log(JSON.parse(JSON.stringify(response.data))). . , , , . TypeScript , .

Answer 4

HttpClient.
:

http.get<ItemsResponse>('/api/items').subscribe(data => {
// data is now an instance of type ItemsResponse, so you can do this:
   this.results = data.results;
});

 getQuotation(quotationId: string, callback: Function) {
    this.http.get<FinBaseModel>('/quotation/' + quotationId).subscribe((data) => {

 // call your callback here and pass 'data'
 // callback(data)
 // or return the value and consume it no need to json to
    return data
}