Load log by id in Angular

Question

This below is a brief explanation.

By clicking the register on browser screen I can not load the records according to the ID.

This below is a detailed application;

View the gif file

You can notice that there are two records being loaded and by clicking on the records it is able to load in the URL the registration ID, when viewing the console you notice that it lists the database records that are only two same.

The problem is that when placing on the page {{ restaurant?.name }} it does not print on the screen the value of the bank.

I don’t know what I’m doing wrong, this is my kind of services;

 restaurantById(id: string): Observable<Restaurant> {
    return this.http.get(`${this.url}/restaurants/${name}`)
    .map(response =>  response.json().restaurants)
    .catch(ErrorHandler.handlerError)
  }

This is my component class according to web page.

ngOnInit() {
    this.restaurantService.restaurantById(this.route.snapshot.params['id'])
    .subscribe(restaurant =>  this.restaurant = restaurant)
}

THIS IS MY REPOSITORY

sorry I put it in high box, because sometimes people do not realize that I have put the link from my repository.

The page is inside the package Restaurant-Detail and the service is the archive Restaurant.service.ts

I’ll be waiting for a comeback, I really need help.

SERVER RESPONSE

Answer 1

Your method restaurantById is ignoring the parameter id, and using a variable that does not exist (name). This way he will make the requisition on /restaurants/ and list all restaurants.

This is evidenced by the need to use the .restaurants in the map method:

restaurantById(id: string): Observable<Restaurant> {
  return this.http.get(`${this.url}/restaurants/${name}`)
  .map(response =>  response.json().restaurants)
  .catch(ErrorHandler.handlerError)
}

According to the posted server response, the ideal implementation would be:

restaurantById(id: string): Observable<Restaurant> {
  return this.http.get(`${this.url}/restaurants/${id}`)
  .map(response =>  response.json().restaurant)
  .catch(ErrorHandler.handlerError)
}

Answer 2

Try it this way:

Service

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

restaurantById(id: string): Observable<Restaurant> {
  return this.http.get<Restaurant>(`${this.url}/restaurants/${id}`)
  .pipe(map(response =>  response.restaurant),
       catchError(ErrorHandler.handlerError)
  )      
}

Component

constructor(protected route: ActivatedRoute)

this.route.params.pipe(
        map(params => params['id']),
        switchMap(id=> this.restaurantService.restaurantById(id))
       .subscribe(restaurant => this.restaurant = restaurant );