CODEWITHSUNDEEP
jsonangularparsingtypescriptrxjs
Rick Lenes
Rick Lenes

Reputation: 97

Parsing JSON in rxjs ajax callback not working

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

This is the JSON I am 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);
    });
  }

Result is like expected: parsed json

But when I add this line below the 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 lines array is empty...

Missing lines array

I don't understand how that is possible because I do the console.log() before I try to cast it to a FinBaseModel

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

Upvotes: 4

Views: 525

Answers (4)

Andy
Andy

Reputation: 1228

Use HttpClient. Documentation
This should do:

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
}

Upvotes: 0

hakobpogh
hakobpogh

Reputation: 677

width the information you have provided for now I can't help you with the solution. But I can help you to debug your code properly: to see the actual values and if the value is changed at the time you're logging it you have to log its clone to be sure that callbacks won't change it. So change your console.log(response.data) with console.log(JSON.parse(JSON.stringify(response.data))). Change both logs and compare results. I think this will help you to understand that it's not changed right there but any of your callbacks are changing it. Because TypeScript types don't do anything actually but just providing you type insurance and accuracy.

Upvotes: 0

Guy Yogev
Guy Yogev

Reputation: 869

console.log prints the object by reference. it was mutated by the time the printing happens, probably by the callback.

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

Upvotes: 3

asmmahmud
asmmahmud

Reputation: 5044

Instead of using JSON.parse you can do this way:

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

Upvotes: 3

Related Questions