Get Heroes in Tour of Heroes from a REST url in Angular 2

Question

After the Angular 2 Tour of heroes tutorial, I found myself wondering how I would "get the heroes" if I were using a REST api.

Given that I have an API running on http://localhost:7000/heroes that would return the "mock-heroes" list of JSON, what is the minimum I need to do to make this "solid"?

I'm as far as understanding I should put it in hero.service.ts; particularly in:

@Injectable()
export class HeroService {
    getHeroes() {
        return Promise.resolve(HEROES);
    }
}

But I'm stuck on how to do this at all using a http GET, let alone do it nicely/with style.

for rest API stuff read out this best examples http://stackoverflow.com/a/34823818/5043867 http://stackoverflow.com/a/34758630/5043867 — Pardeep Jain, Feb 07 '16 at 18:02

score 2 · Answer 1 · answered Feb 07 '16 at 16:02

You need to do like this,

@Injectable()
export class OacService {
    constructor(private http: Http) { }
    ot: Observable<string>;

    search(term: string) {

        let serviceUrl = 'http://localhost:8080/getAutoCompleteData?search=' + term;
        this.ot = this.http
            .get(serviceUrl)
            .map(response => response.json());

        return this.ot;
    }
}

in this case I am returning an Observable's object which is handled from my component's class as ,

this.items = this._oacService.search(term);

and in my html template,

  <li *ngFor="#item of items | async" (click)="setData(item.name)">
      {{item.name}}<br/>
    </li>

You can refer this code from git, https://github.com/bhaskeryadav/AngularJS2.git

This worked! I just don't understand how it can work. I use your `ot: Observable;` as a return for `getHeroes` function. In the app component, it expects `getHeroes` to return an array of Heroes (`Hero[]`). How can it still work? — PascalVKooten, Feb 08 '16 at 22:41
the get method always returns observable and using subscription, I am populating its data to my local collection — BhaskerYadav, Mar 28 '16 at 09:32

score 1 · Answer 2 · answered Oct 14 '16 at 08:28

In their tutorial they use a "InMemoryDataService"

private heroesUrl = 'app/heroes'; // URL to web api

constructor(private http: Http) { }

getHeroes(): Promise { return this.http.get(this.heroesUrl) .toPromise() .then(response => response.json().data as Hero[]) }

You can replace app/heroes with your url and if you get an array with objects you delete the .data after json().data

private heroesUrl = 'URL to web api'; // URL to web api

constructor(private http: Http) { }

getHeroes(): Promise { return this.http.get(this.heroesUrl) .toPromise() .then(response => response.json() as Hero[]) }

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

0

You must leverage the Http class as described below:

import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class HeroService {
  constructor(private http:Http) {
  }

  getHeroes() {
    return this.http.get('http://localhost:7000/heroes').map(res=> res.json());
  }
}

Don't forget to add HTTP_ROUTERS 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 ]);

You need now to handle an observable instead of a promise. For more details, you can have a look at this answer:

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

edited May 23 '17 at 12:02

Community

1
1

answered Feb 07 '16 at 12:57

Thierry Templier

198,364
44
396
360

I think I also have to add ``? – PascalVKooten Feb 07 '16 at 14:20
Then getting `angular2.dev.js:22921 EXCEPTION: ReferenceError: http is not defined in [null]` – PascalVKooten Feb 07 '16 at 14:21
I believe as in that post `map` should be added, and http should be `public`, and it should then be `this.http`, but now I'm stuck on how to get the json structure to be a heroes [] array. – PascalVKooten Feb 07 '16 at 14:26
Which data structure do you receive in the HTTP response payload? You could add it in your question... ;-) – Thierry Templier Feb 08 '16 at 08:33

Get Heroes in Tour of Heroes from a REST url in Angular 2

3 Answers3