Observable returning Undefined

Question

I am trying to load a list on screen in my browser using Observable, however I am not succeeding, this is record that exists in my url;

This is the class of services

import { Http } from '@angular/http';
import { environment } from './../../environments/environment';
import { Restaurant } from './restaurant.model';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';



@Injectable()
export class RestaurantService {
  public url: String = 'http://localhost:3000/api/';

  constructor(private http: Http) {
  //  this.url = environment.url;
   }

   restaurants(): Observable<Restaurant[]> {
    return this.http.get(`${this.url}/restaurants`)
    .map(response => response.json())
  }

I performed a test in component class using console.log as you can see below;

export class RestaurantsComponent implements OnInit {

  restaurants: Restaurant[]

  constructor(private restaurantService: RestaurantService){}

  ngOnInit() {
    this.restaurantService.restaurants()
    .subscribe(restaurants => {
    console.log('o valor é ' , this.restaurants = this.restaurants);
    })
  }

And the result is being that;

o valor é  undefined

I wonder what I’m doing wrong?

Answer 1

The problem is that Voce is using this twice. this.Restaurants != Restaurants

.subscribe(restaurants => {
    this.restaurants =restaurants 
    console.log('o valor é ' , this.restaurants);
})

Answer 2

True friend, you had an ai error of logic, ai try to pass the value returned from restaurants to your variable this.Restaurants in your Subscriber.

Ai your output undefined is referring to the javascript Watch of a variable that is not being defined in loop of subscriber. It is being iterated over an undefined value, thus resulting in something that is not being set.

We solve the case using Arrow Function in the right way

this.restaurants = restaurants

Answer 3

The problem is that you are adding the variable of the component’s scope to itself. You have to add the answer of API the variable restaurants.

I modified your method to make it a little clearer.

Wrong -> this.restaurants = this.restaurants

export class RestaurantsComponent implements OnInit {

  restaurants: Restaurant[]

  constructor(private restaurantService: RestaurantService){}

  ngOnInit() {
    this.restaurantService.restaurants()
       .subscribe(resposta => this.restaurants = resposta);
    })
  }