Angular 7 map operator is not working with httpClient Observable

Question

I got "undefined" after adding the map operator

Angular version: 7

Map import:

import { map } from 'rxjs/operators';

With Map:

this.restaurantService.getRestaurants().pipe(map((restaurant:any) => restaurant.name)).subscribe((restaurants) => {
  console.log(restaurants); // undefined
});

Not necessary "name" field is returning undefined at any field

Without Map

this.restaurantService.getRestaurants().subscribe((restaurants) => {
  console.log(restaurants); // [{...,name: 'lorem'},{...},...]
});

Service:

  getRestaurants(): Observable<_Restaurant[]> {
    return this.get(api.restaurants) as Observable<_Restaurant[]>;
  };

I logged the restaurant inside the map operator and I got an array which is should be object

 .pipe(map(restaurant => {
    console.log(restaurant); //[{},{}] !!
    return restaurant.name;
  }))

Any Idea why I'm getting the undefined?

Answer 1

this.restaurantService
    .getRestaurants()
    .pipe(map((restaurants:any[]) => restaurants.map(restaurant => restaurant.name)));