how to call http call in angular 2?

Question

could you please tell how to call http call in angular 2 and display data using ng-repeat ?

here is my code http://plnkr.co/edit/u6LXrvGuC6f3bOT1tsaZ?p=preview

import {Component,View} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Router} from 'angular2/router';

@Component({

    templateUrl: 'home/home.html'
})


export class AppComponent {
   toDoModel;
  constructor(private _router:Router) {
   http.get('data.json')
      .map(res => res.json())

  }

  onclck(inputValue){
    alert(inputValue)
    this._router.navigate(['Second']);
  }

}

score 3 · Accepted Answer · edited May 23 '17 at 12:17

First you need to inject an Http instance into you component:

export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.http.get('data.json')
        .map(res => res.json())
  }
}

There are then two ways to display your data in an ngFor:

By subscribing on the observable returned by the get method

@Component({
  template: `
    <ul>
      <li *ngFor="#elt of elements">{{elt.name}}</li>
    </ul>
  `
})
export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.http.get('data.json')
        .map(res => res.json())
        .subscribe(data => {
          this.elements = data;
        });
  }
}

By leveraging the async pipe

@Component({
  template: `
    <ul>
      <li *ngFor="#elt of elements | async">{{elt.name}}</li>
    </ul>
  `
})
export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.elements = this.http.get('data.json')
        .map(res => res.json());
  }
}

Don't forget to specify HTTP_PROVIDERS when bootstrapping your application:

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

Here is the corresponding plunkr: https://plnkr.co/edit/bdFeiiAqrPDtFUdguw7s?p=preview.

You could also put your HTTP processing into a dedicated service as described below:

How to Consume Http Component efficiently in a service in angular 2 beta?

Regarding your plunkr, you forgot to add the `http.dev.js` file in your HTML file and add `import 'rxjs/add/operator/map';` in your `script.js` file. See this answer for more details: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276 — Thierry Templier, Feb 11 '16 at 06:01
@ThierryTemplier Thank you! For me, subscribe was the key. I wasn't subscribing to the result because I didn't care about the result--I just wanted to fire and forget. But without the subscription, it never fires! — Mark Meuer, Apr 18 '17 at 18:30

score 0 · Answer 2 · edited Feb 11 '16 at 09:03

0

You need it "inject" Http in order to use it

constructor(private http: Http){
  http.get('https://...')
    .map(response  => { response.json(); })
    .subscribe(value => { this.data = value;})  
}

edited Feb 11 '16 at 09:03

Pankaj Parkar

134,766
23
234
299

answered Feb 11 '16 at 05:47

Günter Zöchbauer

623,577
216
2,003
1,567

Injecting and importing are different things - you need both. See the constructor parameter. – Günter Zöchbauer Feb 11 '16 at 05:50

how to call http call in angular 2?

2 Answers2