Angular Application not retrieving data from json server

Question

I'm trying to get data from a local server, but nothing is coming up. The idea is that it is retrieved by a service, which passes back an observable, and any components that need the data subscribes to the observable.

dish.service.ts

import {Dish} from '../shared/dish';
import {DISHES } from '../shared/dishes';
import {Observable, of} from 'rxjs';
import { delay } from 'rxjs/operators';

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class DishService {

  constructor(private http: HttpClient) {

   }

  getDishes(): Observable<Dish[]>{
    console.log("Hey");
    return this.http.get<Dish[]>(baseURL + 'dishes');

  }
}

menu.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import {DishService} from '../services/dish.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

    dishes: Dish[];

  constructor(private dishService: DishService, @Inject('BaseURL') private BaseURL) { }

  ngOnInit() {
    (dishService => dishService.getDishes().subscribe(dishes => this.dishes = dishes))
  }
 }

It passes the data to menu.component.html, which worked fine before the addition of the server, so I know it isn't that. Here's what's interesting: the console.log("Hey") in the first code sample doesn't execute. It's as if the dishSerivce.getDishes() method isn't even being called by the MenuComponent. I don't know how to dig any deeper than that. Does anyone have any other ideas?

Why are you doing (dishService => dishService.getDishes()? You probably just want this.dishService.getDishes().subscribe — user184994
– user184994, Commented Sep 1, 2018 at 14:55
Doing so appeared to solve stackoverflow.com/questions/52114451/… — Joel Nash
– Joel Nash, Commented Sep 1, 2018 at 15:56

Andreas · Accepted Answer · 2018-09-01 16:05:51Z

1

The problem is in line

(dishService => dishService.getDishes().subscribe(dishes => this.dishes = dishes))

Basically you declare a function here, without calling it. Your code is equivalent to

ngOnInit(){
    function(dishService){
         return dishService.getDishes().subscribe(dishes => this.dishes = dishes);
    }
}

Consider the following code which actually calls the function, passing this.dishService as an argument.

    (dishService => dishService.getDishes().subscribe(dishes => this.dishes = dishes))(this.dishService)

Having said that, the correct approach would be

ngOnInit() {
   this.dishService.getDishes()
      .subscribe(dishes => this.dishes = dishes);
}

answered Sep 1, 2018 at 16:05

Andreas

3461 silver badge8 bronze badges

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

1 Comment

Joel Nash Over a year ago

If I do that, I wind up with this problem. stackoverflow.com/questions/52114451/… I thought I solved this problem by writing it the way I did, but it seems that only prevented the error by preventing the code from executing at all. this.dishService() produces the same error.

Sajeetharan · Accepted Answer · 2018-09-01 15:05:57Z

0

It should be as follows,

ngOnInit() {
     dishService.getDishes().subscribe(dishes => this.dishes = dishes))
  }

answered Sep 1, 2018 at 15:05

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Joel Nash Over a year ago

When I do that, it asks me to write it as this.dishService(). When I do that, it leads me back into this problem stackoverflow.com/questions/52114451/…

Collectives™ on Stack Overflow

Angular Application not retrieving data from json server

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related