Get Json object from url (web api) with angular 2 & Typescript
<p>`Hi, 
I need some help to get JSON data from web API on Visual Studio 2015 .net Core, Angular 2 &amp; Typescript. Angular2 folders in /wwwroot/libs.</p>

<p>I'm using Angular 2's http.get(). The result of the get() function display an undefined value ... Why?</p>

<p>There's my files :</p>

<p><a href="https://i.stack.imgur.com/fGWKH.png" rel="nofollow noreferrer">Folders</a></p>

<p>[API][2]</p>

<p><strong><em>CustomersController.cs</em></strong> => Access OK via <a href="http://localhost:45149/api/customers/" rel="nofollow noreferrer">http://localhost:45149/api/customers/</a> => [{...},{...},{...}]</p>

<pre><code>public class CustomersController : Controller
{
    // GET: api/customers 
    [HttpGet]
    public IList&lt;Customer&gt; Get()
    {
        var objects = new List&lt;Customer&gt;
        {
            new Customer { Id = 1, Log = "user01", Name = "user1" },
            new Customer { Id = 2, Log = "user02", Name = "user2" },
            new Customer { Id = 3, Log = "user03", Name = "user3" }
        };
        return objects;
    }
}
</code></pre>

<p><strong><em>customer.ts</em></strong></p>

<pre><code>export class Customer {
constructor(
    public Id: number,
    public Log: string,
    public Name: string
    ){}
}
</code></pre>

<p><strong><em>customer.service.ts</em></strong></p>

<pre><code>import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Customer } from "./customer";
import "rxjs/Rx"

@Injectable()
export class CustomerService {
private baseUrl = "http://localhost:45149/api/customers/";  // web api URL
constructor(private http: Http) { }

getCustomers() {
    return this.http.get(this.baseUrl)
        .map(res =&gt; &lt;Customer[]&gt; res.json())
        .catch(error =&gt; {
            console.log(error);
            return Observable.throw(error);
        });
}}
</code></pre>

<p><strong><em>customer.component.ts</em></strong></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { Customer } from './customer';
import { CustomerService } from './customer.service'

@Component({
selector: 'app-api',
template: ` 
&lt;ul class=""&gt;
&lt;li *ngFor="let customer of customers"&gt;
&lt;span class=""&gt; 
{{customer.Id}} &lt;/span&gt; {{customer.Name}}
&lt;/li&gt;
&lt;/ul&gt;`,
    providers: [
            HTTP_PROVIDERS,
            CustomerService
    ] }) 

    export class CustomerComponent implements OnInit{
    api: string;
    public customers: Customer[];

    constructor(private customerService: CustomerService) {
    this.api = "API Customers"; 
}

ngOnInit() {
    this.customerService.getCustomers()
        .subscribe(
        customers =&gt;
        {
            console.log(this.customers);
            this.customers = customers;
        },
        error =&gt; alert("error"));
}}
</code></pre>

<p><strong><em>app.module.ts</em></strong></p>

<pre><code>// 
*** Imports ***
//

@NgModule({
imports: [BrowserModule, routing], //other modules the app depends on
providers: [CustomerService],
declarations: [AppComponent,
HomeComponent,UploadComponent,CustomerComponent],
bootstrap: [AppComponent] // root component to bootstarp
})

export class AppModule { }
</code></pre>

<p><strong><em>app.component.ts</em></strong></p>

<pre><code>import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app/app.component.html' // =&gt; SPA
})

export class AppComponent {
title = "App-root"
}
</code></pre>

<p>Thank you.</p>