Return a List of custom objects from an HTTP GET for use in an Angular 2 app
<p>I'm trying to figure out how to properly return a list of custom objects and print its contents using an HTML file. </p>

<p>Here's what the HTTP GET method looks like (for simplicity's sake I've stripped some things down to only illustrate the problem) :</p>

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

<p>My TypeScript file (called home.ts) subscribes and calls the HttpGet method - here's what the Home class looks like (I've excluded all the imports and @Component section):</p>

<pre><code>export class Home {
public selectedConfiguration: string = 'TESTVALUE';

constructor(private http: Http) {
    this.getConfigurations()
        .subscribe(res =&gt; {
            this.selectedConfiguration = res;
        });
}

getConfigurations() {
    console.log('Home:getConfigurations entered...');

    return this.http.get('atr/testing')
        .map((response) =&gt; {
            console.log(response);
            return response.json();
        });
}
</code></pre>

<p>}</p>

<p>As you can see, the constructor calls 'getConfigurations' which calls the HttpGet method. The part that confuses me is how do I go about using the returned response properly? Form my understanding responses are returned as JSON strings (which is why my selectedConfiguration variable in the Home class is a string value instead of a List). When I try to print out the 'selectedConfiguration' string with {{selectedConfiguration}} in my HTML file I get this:</p>

<pre><code>[object Object],[object Object],[object Object],[object Object]
</code></pre>

<p>If I use {{selectedConfiguration[0]}} in my HTML I only get one: [object Object]</p>

<p>The List returned by the GET method is supposed to have 4 CustomObject's in it and it seems like the JSON response has that at least. Each CustomObject has variables like 'Name', 'Date', 'Time', etc. I've tried printing data in my HTML using {{selectedConfiguration[0].Name}} and it prints out nothing. I'm not really sure what do to from here (or if I'm doing something wrong) in order to display each object's info. </p>