JSON object from Angular http not deserializing properly

Question

First here are my operating versions: node v12.13.1 | npm 6.12.1

I am having some issues understanding why this isn't de-serializing properly. I am receiving the following back from my rest service.

{ "numbers":[],
  "batches":[ 
    { "id":"AB3E809","status":"1"},
    { "id":"EEF32A9","status":"0"}] }

These are the TypeScript interfaces I am using when trying to type the data.

interface NumJson {
  status: string,
  num: string
}

interface BatchJson {
  id: string,
  status: string
}

interface Status {
  numbers: NumJson[],
  batches: BatchJson[];
}

When making these calls from my Angular service, it doesn't seem to recognize or access the data properly.

this.http.get<any>(url).subscribe({
  next: (data: Status) => {
    console.log(data);              // same as JSON above
    console.log(data.numbers);      // undefined
    console.log(data.batches);      // undefined
}

this.http.get<any>(url).subscribe({
  next: (data: any) => {
    console.log(data);              // same as JSON above
    console.log(data.numbers);      // undefined
    console.log(data.batches);      // undefined
}

Any insights on this would be great as this is the only subscribe that is having issues.

Can you post a screenshot of the response from the network tab of your browser — Kurt Hamilton
– Kurt Hamilton, Commented Mar 17, 2020 at 17:22
@KurtHamilton I cannot due to what I presented here is a sanitized version of what I am working on. I did triple check that the code (json, methods) are identical to the outputs from my live code. The code comments denote what was from the console. — Sean
– Sean, Commented Mar 17, 2020 at 17:30
How does my version differ from yours: stackblitz.com/edit/angular-icdiyv? — Kurt Hamilton
– Kurt Hamilton, Commented Mar 17, 2020 at 17:37
@KurtHamilton Looks the same, except I am getting undefined from console.log(response.numbers) and console.log(response.batches) — Sean
– Sean, Commented Mar 17, 2020 at 17:41

Sean · Accepted Answer · 2020-03-23 15:33:10Z

2

I figured out the issue after some thought provoking examples from 'Kurt Hamilton'. My issue was with how the rest service was returning my data.

The correctly formatted data should look like this in the console:

My outputs were displaying strings; which made me question why my data was a string verse an object in the console. (A good note to take away from this issue)

After inspecting the rest service, I realized that it was doing a double serialization. Once I corrected that, the data output looked and acted correctly.

edited Mar 23, 2020 at 15:33

answered Mar 17, 2020 at 19:10

Sean

3983 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSON object from Angular http not deserializing properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related