Angular method returns undefined

Question

As a beginner, I facing a problem with Angular and Observables. I have API for getting information about one specific restaurant in the database, but I have to get it with a POST request. I successfully get restaurantID from auth.service and another API when the restaurant is logged in, But when I tried to log restaurant in console, I get undefined. Uniformly I don't have permission to show API here. The code:

restaurant.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Restaurant } from '../models/Restaurant';
import { LoggedRestaurant } from '../models/LoggedRestaurant';

@Injectable({
  providedIn: 'root'
})
export class RestaurantService {

  private restaurantUrl = 'xxxxxxxxxxxx';

  public restaurant: Restaurant;
  public loggedRestaurant: LoggedRestaurant
  public restaurantID;

  constructor(private http: HttpClient) { }

  public getRestaurant(): Observable<LoggedRestaurant> {
    return this.http.post<LoggedRestaurant>(this.restaurantUrl, this.restaurantID);
  }
}

informacije.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { RestaurantService } from '../services/restaurant.service';
import { Restaurant } from '../models/Restaurant';
import { LoggedRestaurant } from '../models/LoggedRestaurant';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-informacije',
  templateUrl: './informacije.component.html',
  styleUrls: ['./informacije.component.scss']
})
export class InformacijeComponent implements OnInit {
  restaurant: Restaurant;
  loggedRestaurant: LoggedRestaurant;
  restaurantID;

  constructor(private restaurantService: RestaurantService, private authService: AuthService ) { }

  getRestaurant() {
    return this.restaurantService.getRestaurant()

  }

  ngOnInit() {
    this.restaurant = this.authService.currRestaurant[0];
    console.log(this.restaurant)
    console.log(this.loggedRestaurant)

    this.restaurantID = this.restaurant.id;
    console.log(this.restaurantID)
    this.restaurantService.restaurantID =this.restaurantID;

  }
}

Observables need to be subscribed to in order to make a request, and they're asynchronous, meaning that even when subscribed to, you won't have the correct logs. Before using a library, I highly suggest you read the documentation : we're here to help in case of issues, but this isn't an issue, that's just you not learning the basics of the framework you're about to use (no offense) — user4676340
– user4676340, Commented May 22, 2019 at 8:39
You are never calling your getRestaurant() function in InformacijeComponent. — MauriceNino
– MauriceNino, Commented May 22, 2019 at 8:39
@trichetriche, you are correct, I have to learn more about rxjs, I know. uniformly, but I get this project to work on at the same time as I learning angular. thank you for your time :) — seven
– seven, Commented May 22, 2019 at 8:43

Dulanjaya Tennekoon · Accepted Answer · 2019-05-22 08:47:43Z

2

httpClient.post() returns an observable (RXJS). So you need to subscribe to that. Otherwise, you may use the async pipe.

in your html, you can try this,

<span>{{getRestaurant() | aync}}</span>

OR,

you can declare a variable in your ts like data, and,

this.restaurantService.getRestaurant().subscribe(payload => {
  this.data = payload;
})

and in your html, you can add,

<span *ngIf="data">{{data}}</span>

edited May 22, 2019 at 8:47

answered May 22, 2019 at 8:42

Dulanjaya Tennekoon

2,5181 gold badge20 silver badges33 bronze badges

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

3 Comments

seven Over a year ago

Thank you for your time, but I already tried ``` getRestaurant() { return this.restaurantService.getRestaurant().subscribe(data => { this.loggedRestaurant = data }) } ``` but it still returns undefined

Dulanjaya Tennekoon Over a year ago

You are still returning an observable. Do exactly what i suggest.

seven Over a year ago

I did that too, sorry if I spam you with this question.

Askirkela · Accepted Answer · 2019-05-22 08:42:52Z

0

You need to subscribe to your API call.
In informacije.component.ts

getRestaurant() {
    return this.restaurantService.getRestaurant()
    .subscribe(data => this.restaurant = data);
  }

This will asign the value returned by your service to your restaurant field in an asynchronous fashion.

answered May 22, 2019 at 8:42

Askirkela

1,21911 silver badges20 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2019-05-22 08:43:00Z

0

In ngOnInit() call getRestaurant as follows

async ngOnInit() {
  let restaurant = await this.getRestaurant().toPromise();
  ...
}

answered May 22, 2019 at 8:43

Kamil Kiełczewski

93.8k34 gold badges401 silver badges375 bronze badges

Collectives™ on Stack Overflow

Angular method returns undefined

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related