title: Get Json object from url (web api) with angular 2 & Typescript
body: <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>