Return a list of user objects from an HTTP GET for use in an Angular 2 application

Question

I am trying to figure out how to correctly return a list of custom objects and print its contents using an HTML file.

Here's what the HTTP GET method looks like (for simplicity, I have separated some things to illustrate the problem):

[HttpGet("/atr/testing")] public List<CustomObject> GetCustomObjects() { //MasterObject.CustomObjects returns a List of CustomObjects return MasterObject.CustomObjects(); } 

My TypeScript file (called home.ts) is signed and calls the HttpGet method - this is what the Home class looks like (I excluded all import sections and @Component):

 export class Home { public selectedConfiguration: string = 'TESTVALUE'; constructor(private http: Http) { this.getConfigurations() .subscribe(res => { this.selectedConfiguration = res; }); } getConfigurations() { console.log('Home:getConfigurations entered...'); return this.http.get('atr/testing') .map((response) => { console.log(response); return response.json(); }); } 

}

As you can see, the constructor calls getConfigurations, which calls the HttpGet method. The part that bothers me is how can I use the returned answer correctly? To form my answers in the response are returned as JSON strings (therefore, my selected configuration variable in the Home class is a string value, not a List). When I try to print the string 'selectedConfiguration' with {{selectedConfiguration}} in my HTML file, I get the following:

 [object Object],[object Object],[object Object],[object Object] 

If I use {{selectedConfiguration [0]}} in my HTML, I get only one: [object Object]

The list returned by the GET method should have 4 CustomObjects in it, and it looks like the JSON response has at least. Each CustomObject has variables such as "Name", "Date", "Time", etc. I tried to print the data in my HTML using {{selectedConfiguration [0] .Name}} and it does not print anything. I'm not quite sure what to do next (or if I am doing something wrong) to display information about each object.

Answer 1

Short answer

In your example, you are trying to convert a JSON object to a string. To make it work, you probably have to do:

 this.selectedConfiguration = JSON.stringify(res); 

Long answer

Let's say your CustomObject class looks something like this:

 public class CustomObject { public string Name { get; set; } public DateTime Date { get; set; } } 

In Angular code, create an interface that mimics. Check in the developer tools for a match ("Name", not "name"):

 export interface ICustomObject { Name: string; Date: Date; } 

Use TypeScript type checking and actually read the returned list as an array of your CustomObjects:

 export class Home implements OnInit { public configurations: ICustomObject[]; public selectedConfiguration: ICustomObject; constructor(private http: Http) { // move initialization code to ngOnInit. Don't forget the import and implements } ngOnInit() { this.getConfigurations() .subscribe((customList: ICustomObject[]) => { this.configurations = customList; // todo: determine the selected configuration this.selectedConfiguration = this.configurations[0]; }); } getConfigurations(): ICustomObject[] { return this.http.get('atr/testing') .map((response: Response) => { return <ICustomObject[]>response.json(); }); } 

Answer 2

Return it as a json result:

 [HttpGet("/atr/testing")] public JsonResult GetCustomObjects() { //MasterObject.CustomObjects returns a List of CustomObjects return Json(MasterObject.CustomObjects()); }