Calling web API from a service in Angular 2

Question

I am using Angular 2.0 beta version. I need to call a web API from a service. But I didn't get any solution.

mobileService.ts

import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import { Mobile } from './datatypes/Mobile';

@Injectable()
export class MobileService {          
     constructor(public http: Http) {     
        this.http = http;
        }

getMobiles() {        
    // return an observable
    return this.http.get("api/ElectronicsAPI/Get")
        .map((responseData) => {
            return responseData.json();
        })
        .map((mobiles: Array<any>) => {
            let result: Array<Mobile> = [];
            if (mobiles) {
                mobiles.forEach((mobile) => {
                    result.push(
                        new Mobile(mobile.name,
                            mobile.price));
                });
            }
            return result;
        });
}
}

Error is,

this.http.get(...).map is not a function

Also I haved some questions related to this topics. In that, they mention to import map as,

import 'Rxjs/add/operator/map'

But how can I do that in TypeScript?

Is there any other way to import plugin for the map function ?

boot.ts

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

bootstrap(AppComponent,[ROUTER_PROVIDERS,HTTP_PROVIDERS]);

Community · Accepted Answer · 2017-05-23 11:46:44Z

1

You can use the following within your mobileService.ts file:

import 'Rxjs/add/operator/map'

This import should be done where you use the map method.

The following answers could help you as well:

Hope it helps you, Thierry

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jan 8, 2016 at 6:53

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bharathi Mohan Over a year ago

Thank you for your response... But, i have some doubts in this import statement... How it will be mapped? Shall i include any script file in the index.html

Thierry Templier Over a year ago

In fact, you should have the Rx.js already included within your index.html file using a script element. The import must be done in the mobileService.ts file...

Bharathi Mohan Over a year ago

Now i got the solution. After doing some changes in the system.config

Collectives™ on Stack Overflow

Calling web API from a service in Angular 2

mobileService.ts

boot.ts

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

mobileService.ts

boot.ts

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related