read json from server with ionic 3 (angular 4)

Question

I have a provider that get data from local server that gives me response

I have a provider that get data from local server that gives me response

    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import {Observable} from 'rxjs/Rx';


    @Injectable()
    export class UserProvider {

      baseUrl;
      constructor(public http: HttpClient) {
        this.baseUrl = "http://127.0.0.1:8000/api/";
      }

      public getUser(): Observable<any> {
        return this.http.get(this.baseUrl + "user/1")
          .map( (response: Response) => {
          const data = response;
          return data; } );
      }


    }

On a page i subscribe on it in getUser() function and try to hadle it

      import {Component} from '@angular/core';
      import {NavController} from 'ionic-angular';
      import {UserProvider} from "../../providers/user/user";

      @Component({
        selector: 'page-home',
        templateUrl: 'home.html'
      })
      export class HomePage {

        user: any;

        constructor(
          public navCtrl: NavController,
          private userProvider:UserProvider,
        ) {        


        }

        ngOnInit(){
          this.getUser();
        }



        getUser(){
          this.userProvider.getUser().subscribe(data =>{
            console.log(data);
            this.user = data;
          });
        }


      }

But user still undefined and i cant get fields of the object, what is wrong with that?

Answer 1

I would replace

public getUser(): Observable<any> {
    return this.http.get(this.baseUrl + "user/1")
      .map( (response: Response) => {
      const data = response;
      return data; } );
  }

by

 import { tap }      from 'rxjs/operators';
 public getUser(): Observable<any> {
    return this.http.get(this.baseUrl + "user/1")
      .pipe(tap(this.extractData));
  }
  private extractData(res: Response) {
    return res || [];
  } 

and the last one :

    getUser(){
      this.userProvider.getUser().subscribe(data =>{
        console.log(data);
        this.user = data.body;
      });
    }