Angular HTTP subscribe does not return Sponse

Question

I created a service to hit my API and return all orders according to certain type params.

When I try to assign the return to my Component, it does not return me an array of results, it returns me a Subscriber.

Service

 baseUrl = 'http://localhost:3001';
 constructor(private http: HttpClient) { }
 getPedidos = (tipo: Pedidos): Observable<any> => this.http.get(`${baseUrl}/pedidos?tipo=${tipo}`);

Component ts

ngOnInit() {
    this.pratosPrincipais = this.getPedidos(1);
  }

  private getPedidos = (tipo) =>
  this.pedidoService.getPedidos(tipo)
  .subscribe(pedido => pedido)

When assigning the variable, this is the value assigned:

Right after that, I pass the value via Input to another component.

<app-expansion-panel title="Prato Principal" [data]=pratosPrincipais></app-expansion-panel>

Component Expansion panel ts

@Input() data;

I tried to subscribe to date, but it shows error which is not a function. I tested the api and it works normally.

What am I forgetting?

Answer 1

We know the method HttpClient.get() serves to fetch data from a server, even if it seems redundant is relevant information. The method assíncrono sends a request HTTP and returns a Observable issuing the requested data when the resposta is received. The method get() contains two arguments: the URL and an object of opções, but in your request you have only the URL, pass the second parameter to your API so that it can receive the desired response using: {observe: 'response'}.

That is to say:

getPedidos = (tipo: Pedidos): Observable<any> => this.http.get(`${baseUrl}/pedidos?tipo=${tipo}`, {observe: 'response'});

Thus the observe specifies what type of answer you want to get.

You can find more information about the types of returns on the official Angular website: https://angular.io/guide/http#requesting-data-from-a-server

Answer 2

Obervables are like a stream of data that emits events, so to get the data from these events you need to subscribe to the stream, the object returned from this stream is a subscriber (which is the object being associated with pratosPrincipais).
In your case the code is entered but when the stream emits next (which is when the request returns) its function that listens to the next does not change anything your local scope, in case your code needs to associate the value in the scope outside the stream:

ngOnInit() {
  this.pedidoService.getPedidos(1)
    .subscribe(pedido => this.pratosPrincipais = pedido)
}

To make it clearer, the Subscriber is the point at which the plumbing the stream will send the data, you need a action whenever something is received in that pipeline.

Yes, observables are complicated at first but in practice it is easier, see the examples of api :)

Answer 3

In this case your requested variable appears to be another Obervable....

You could do it this way:

ngOnInit() {
    this.getPedidos(1);
  }

  private getPedidos = (tipo) =>
  this.pedidoService.getPedidos(tipo)
  .subscribe(pedido => this.pratosPrincipais = pedido);

Or another option would be to convert to Promise and switch to async/await

 async ngOnInit() {
   this.pratosPrincipais = await this.getPedidos(1);
  }

  private getPedidos = (tipo) =>
  this.pedidoService.getPedidos(tipo)
  .toPromise()