How to return data from service in angular4

Question

Coming from the Angular1x background.I am migrating my existing app to Angular4

This is how my ng4 Service looks like

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class DataService {
  private _http : Http;

constructor(http:Http) {
   this._http = http;
}


public GetPosts() : any{
this._http.get("https://jsonplaceholder.typicode.com/posts").subscribe(data => {
  const posts = data.json();
  console.log(posts); // logs the desired json
  return posts;
})}}

Consuming the above service from the component.

import { Component, OnInit } from '@angular/core';
import {Customer} from './customer.model';
import  {DataService } from '../../providers/data.service';

@Component({
 selector: 'app-customer',
 templateUrl: './customer.component.html',
 styleUrls: ['./customer.component.css']
})

export class CustomerComponent implements OnInit {

private _dService: DataService;

constructor(dService:DataService) {
 this._dService = dService;}

ngOnInit() {}


public GetAll(){
  let posts =this._dService.GetPosts();
  debugger;
  console.log(posts); // undefined
 /* here the posts is getting UNDEFINED (error) */
}}

In Angular1X, I used to return promise from ngService but how do the same in angular4??

Answer 1

You should subscribe to the observable in the component, not in the service.

In your service

public GetPosts() : any{
   return this._http.get("https://jsonplaceholder.typicode.com/posts");
}

And in your component

this._dService.GetPosts().subscribe(data => {
    const posts = data.json();
    console.log(posts);
    // Do whatever you like with posts

)};

Answer 2

The call to subscribe should be in the component's code

Answer 3

constructor(private http:Http) { }

getPosts(){
    return this.http.get('https://jsonplaceholder.typicode.com/posts').map(
      (response: Response) => {
                    return response.json();
      }
    )
 }

And in the component: the best practice you declare :

data : any; 

this._dService.GetPosts().subscribe(
      data => {this.data = data;
      console.log(this.books);},
      err => {console.log(err);},

      ()=> {console.log("terminated");}
    );