how to get data from service in angular 2?

Question

I am able to get data using http (in a same component ) .But I am not getting data using service.can we call service method and grt data from server and display on component ? I try to make service and try to get data from server .But I am not able to know how to use this service ? http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
// Name Service
export interface myData {
   name:Array;
}



@Injectable()
export class SharedService {
  sharingData: myData=[{name:"nyks"}];
   constructor(private http:Http) {
    }
  getData:Array()
  {
    this.sharingData.name=this.http.get('data.json')
        .map(res => res.json());

    return this.sharingData.name;
  }
}

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

3

You could try this:

import {SharedService} from './service';

@Component({
  (...)
  providers: [SharedService]
})
export class MyComponent {
  constructor(private service:SharedService) {
    this.service.getData();
  }
}

That said, I see strange things into your service since the Angular2 HTTP support leverages observables (asynchronous processing). I would refactor it this way:

@Injectable()
export class SharedService {
  //sharingData: myData=[{name:"nyks"}];
  constructor(private http:Http) {
  }

  getData:Array() {
    return this.http.get('data.json')
               .map(res => res.json());
  }
}

and in the component:

import {SharedService} from './service';

@Component({
  (...)
  template: `
    <ul>
      <li *ngFor="d of dataToDisplay">{{d.name}}</li>
    <ul>
  `,
  providers: [SharedService]
})
export class MyComponent {
  constructor(private service:SharedService) {
    this.service.getData().subscribe(data => {
      this.dataToDisplay = data;
    });
  }
}

This answer could give you more details:

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

edited May 23 '17 at 12:10

Community

1
1

answered Feb 11 '16 at 06:46

Thierry Templier

198,364
44
396
360

wait sorry I will try wait – user944513 Feb 11 '16 at 06:48
Yes sure! No worries! – Thierry Templier Feb 11 '16 at 06:51
I got your answer ...But my code is still work when i used sharingData variable http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview – user944513 Feb 11 '16 at 06:54
Yes, but I'm pretty sure that the `sharingData` variable isn't what you expect it is ;-) It contains an observable not the data. The observable is responsible to receive data when they will be received. If you want to share this observable, that's fine but I don't think it's what you try to do... – Thierry Templier Feb 11 '16 at 07:21
If you want to store received data as well in your service when received. You should do it when calling the `map` operator... – Thierry Templier Feb 11 '16 at 07:23
ok thanks ..could you please tell me how I will filter my data ..if I type anything in input field like auto complete in angular 1 I used pipe symbol ..here is my code http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview – user944513 Feb 11 '16 at 07:25
There is support of pipes (what is called filter in angular1). You can implement your own one. You can have a look at this question: http://stackoverflow.com/questions/35065668/how-to-pass-array-as-arg-in-pipe-in-angular2 – Thierry Templier Feb 11 '16 at 07:30

score 0 · Answer 2 · answered Feb 11 '16 at 06:49

You need to add SharedService to the list of providers in bootstrap

bootstrap(MainComponent,[
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}),
  HTTP_PROVIDERS,
  SharedService
]);

then you can inject it into your component

export class MainComponent {
    constructor(private sharedService:SharedService) {}

    clickHandler() {
      this.data = sharedService.getData()
    }
}

the getData method needs to be fixed

 {
    this.sharingData.name=this.http.get('data.json')
        .map(res => res.json());
    // the following line is executed before the result arrives
    // because above code is async
    // therefore this always returns null
    return this.sharingData.name;
  }

how to get data from service in angular 2?

2 Answers2