angular - Get request returns subscriber when the component asks for it

Question

The get request works by itself, if I print the result of the request it returns the json as it should, but when I access the method in the component, the method retuns the subscription and the variable i set remains undefined.

Auth Service:

getUserData() { 
    return this.http.get(`${this.env.API_URL}/users/firebase/${JSON.parse(localStorage.getItem('user')).uid}`).subscribe({
      next: ( data:any ) => {
        console.log(data.data.person)
      },
      error: error => {
        this.alert.showAlert("Error!", error.message)
        console.error('There was an error!', error)
      }
    })
  }

Account Component:

user:any

  constructor(public auth: AuthService, private router: Router, private alert: Ion_Alert) {
    if(this.auth.isLoggedIn) {
      this.user = this.auth.getUserData()
      console.log(this.user)
    } else {
      this.alert.showAlert('Error!', "You're not logged in or you haven't verified your mail")
    }
  }

Returns

//console.log(this.user)
Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
closed: true
destination: SafeSubscriber {closed: true, _parentOrParents: null, _subscriptions: null, syncErrorValue: null, syncErrorThrown: false, …}
isStopped: true
syncErrorThrowable: true
syncErrorThrown: false
syncErrorValue: null
_parentOrParents: null
_subscriptions: null
__proto__: Subscription

//console.log(data.data.person)
{id: 35, address: null, dni: "343242342ds", document_type: 1, phone: "12424134234", …}
address: null
city_id: 215
dni: "343242342ds"
document_type: 1
documents_type: {id: 1, name: "CEDULA DE CIUDADANIA", status: 1}
first_name: "asdasdasdad"
genre: "male"
id: 35
last_name: "asdasdasdasd"
municipio: {id: 215, name: "TUNJA", departamento_id: 5, departamento: {…}}
phone: "12424134234"
photo: null
profession: "fdsdsfsdf"
user_id: "57"
__proto__: Object

Answer 1

You should only subscribe when you're calling the method that calls the service:

Auth Service:

getUserData() { 
    return this.http.get(`${this.env.API_URL}/users/firebase/${JSON.parse(localStorage.getItem('user')).uid}`)
    }

And the, in the constructor of your component (where you inject the service):

this.auth.getUserData().subscribe({
      ( data:any ) => {
       this.user = data.data.person // <-- I think you mean this
        console.log(data.data.person)
      },
      error: error => {
        this.alert.showAlert("Error!", error.message)
        console.error('There was an error!', error)
      }
    })
  }