Acquire Superheroes in Journey of Champions from a REST endpoint using Angular 2

Question

Acquire Superheroes in Journey of Champions from a REST endpoint using Angular 2

Upon completing the Angular 2 Tour of heroes tutorial, I found myself pondering how to "retrieve the heroes" using a REST API.

If my API is hosted at http://localhost:7000/heroes and returns a JSON list of "mock-heroes", what steps must I take to ensure a robust implementation?

I grasp that I should place this functionality within hero.service.ts; specifically inside:

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

Yet, I am uncertain on initiating an HTTP GET request for this purpose, let alone executing it elegantly or stylishly.

angular typescript angular2-http angular-tour-of-heroes

Answer 1

Answer №1

Follow this structure for your code:

@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;
    }
}

When using the above service in a component, do it like this:

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

In your HTML template, utilize the items as follows:

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

You can find more details on this implementation on GitHub at https://github.com/bhaskeryadav/AngularJS2.git

Answer 2

Follow this structure for your code:

@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;
    }
}

When using the above service in a component, do it like this:

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

In your HTML template, utilize the items as follows:

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

You can find more details on this implementation on GitHub at https://github.com/bhaskeryadav/AngularJS2.git

Answer 3

Answer №2

The tutorial showcases the use of an "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 have the flexibility to replace 'app/heroes' with your own URL. If you receive an array of objects, you can omit 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[]) }

Answer 4

The tutorial showcases the use of an "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 have the flexibility to replace 'app/heroes' with your own URL. If you receive an array of objects, you can omit 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[]) }

Answer 5

Answer №3

To effectively utilize the Http class, follow the instructions provided:

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());
  }
}

Remember to include HTTP_ROUTERS during the bootstrapping process of your application:

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

It is now necessary to manage an observable instead of a promise. Refer to the following answer for more information:

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

Answer 6

To effectively utilize the Http class, follow the instructions provided:

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());
  }
}

Remember to include HTTP_ROUTERS during the bootstrapping process of your application:

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

It is now necessary to manage an observable instead of a promise. Refer to the following answer for more information:

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

Acquire Superheroes in Journey of Champions from a REST endpoint using Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

utilize a modal button in Angular to showcase images

Is it true that one must have 280 different dependencies in order to use angular2?

Using Typescript and Next.js to handle error messages returned from Axios responses

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

Declaring and accessing class variables in Angular 4

Activate the datepicker in Angular by clicking on the input field

Error: Angular SSR does not recognize IDBIndex

Error building Angular module occurred while executing the project

What are the reasons behind the compilation failure of the react-sortable-hoc basic example when using typescript?

What is the best way to position three DIVs next to each other within another DIV while aligning the last DIV to the right?

Joi has decided against incorporating custom operators into their extended features

Unable to assign unique identifiers to elements within a user interface framework

Encountering an issue with Angular 2.0.1 Router where it throws an EmptyError due to

Pagination feature in MUI DataGrid table is malfunctioning

The Angular 9 component remains static on the page despite successfully capturing the correct value from the URL

Steps for running an Angular application in IntelliJ:1. Open IntelliJ IDEA

Utilizing Typescript to inject dependencies and receive arguments within a class

Can you explain how I can showcase JSON object values within an Angular framework?

What is the best way to map elements when passing props as well?

Utilizing ExpressJS in a NodeJS application with ES6 and Typescript