在Angular 4中读取JSON

Question

I receive the following JSON data from a web service in Angular 4:

    {
        "NewDataSet": {
            "Table": [
                {
                    "DataPointID": [
                        "6520"
                    ]
               }
           ]
       }
    }

I have verified that it is valid JSON data, but when I try to return, I don't get the value. I received it as a string and I converted it into JSON using JSON.Stringfy(obj,null,'\\t')

obj.NewDataSet.Table[0].DataPointID throws

ERROR TypeError: Cannot read property 'Table' of undefined.

I tried this on w3School in html, but it seems that it's working there. What is the issue?

Answer 1

when you get the object you should read it as

this.http.get(ServiceUrls.employees.detail(this.operations.userID)).subscribe(
      detail => this.RequestSuccess(detail.json()), (error: Response) => this.RequestError(error.json())
    );

Notice there is a detail.json() so in your function you don't have to do anything else.

Answer 2

You should create an interface and let know the get that it must return the value in the interface type. So your code might look something like the following:

export interface ThisGetInterfaceResponse {
    "NewDataSet": NewDataSetModel
}

export class NewDataSetModel {
    "Table": Table[]
}

export class Table {
   constructor(
      "DataPointID": number[]
   ) {}
}

Let's say you have httpService that is an instance of HttpClient injected in your component:

this.httpService.get<ThisGetInterfaceResponse>(url).subscribe((res: ThisGetInterfaceResponse) => {
   console.log(res.NewDataSet.Table);
})

Also pay attention to .subscribe() because if you subscribe to the observer multiple times it will request the resource multiple times. For example:

let observable = this.httpService.get<ResponseInterface>(url); observable.subscribe(); observable.subscribe(); ...