3

Trabalhando com Observable e RxJS, me deparei com o seguinte problema. Em determinado ponto do código, meu acesso ao banco é feito da seguinte forma:

getExemplo(id: number):Observable<Exemplo>{
  return this.http.get<Exemplo[]>(PATH)
  // TODO filtrar array dentro do observable para pegar item correto
}

Como eu posso realizar uma filtragem dentro desse Observable de forma a retornar apenas o primeiro item cujo o id seja igual ao id passado como parâmetro?

2
  • 2
    Não é melhor na parte de acesso ao banco já fazer esse filtro? (eu não sei se você tem essa possibilidade, isso seria bom colocar, você tem dominio ou é de terceiros?)
    – novic
    Commented 8/10/2019 às 20:27
  • Tá mais pra uma experiência que tô fazendo, pra aprender como usar filtros em um Observable Commented 9/10/2019 às 16:30

2 Respostas 2

6

A ideia é usar as operações pipe e map, para mapear a resposta para o que você precisa:

import { map } from 'rxjs/operators';

getExemplo(id: number): Observable<Exemplo>{
  return this.http.get<Exemplo[]>(PATH).pipe(
    map(exemplos => exemplos.filter(e => e.id === id)[0])
  );
}

No caso, exemplos é o array de Exemplo, do qual você filtra os elementos pelo ID.

Só um detalhe: o método filter retorna outro array, contendo os elementos filtrados. Então para pegar o primeiro elemento você deve usar [0] logo depois, para que o retorno seja Observable<Exemplo> (que é o que getExemplo está retornando).

Se você só usar filter (sem pegar o primeiro elemento com [0]), o retorno será um array, e o resultado será um Observable<Exemplo[]>.


Obviamente o código acima assume que sempre existirá um elemento com o ID indicado. Mas se quiser, também pode verificar se filter retornou um array vazio. E caso seja vazio (ou seja, nenhum elemento com o ID foi encontrado) retorne null, por exemplo (ou tome qualquer outra ação que julgar necessária):

getExemplo(id: number): Observable<Exemplo>{
  return this.http.get<Exemplo[]>(PATH).pipe(
    map(exemplos =>  {
      let filtrados = exemplos.filter(e => e.id === id);
      if (filtrados.length > 0) { // tem pelo menos um elemento com o ID
        return filtrados[0]; // retorna o primeiro
      }
      // nenhum elemento com o ID foi encontrado, retorna null
      return null;
    })
  );
}

Usando o código acima, bastaria então verificar se o Exemplo retornado é null:

getExemplo(123).subscribe(exemplo => {
    if (exemplo) {
        // exemplo com ID 123 existe
    } else {
        // exemplo com ID 123 não existe
    }
}

Outra alternativa é usar o método find:

getExemplo(id: number): Observable<Exemplo>{
  return this.http.get<Exemplo[]>(PATH).pipe(
    map(exemplos => exemplos.find(e => e.id === id))
  );
}

O find retorna o primeiro elemento do array que satisfaz a condição, ou undefined se nenhum for encontrado.

5

Voce tem que mapear a reposta so pro item que vc quer:

 return this.http.get<Exemplo[]>(PATH).pipe(
       map(response => { //map do rxjs
              return response.filter(item=>item.id===id); // filter do array nativo
      })
 )
3
  • Acho que deve trocar o tipo de retorno também, já que agora só retorna uma objeto, ficaria: return this.http.get<Exemplo>(PATH) e o restante do código que você colocou. Commented 9/10/2019 às 13:11
  • Acho que ta certo porque esse tipo é em relação ao get e não o que acontece depois do pipe Commented 9/10/2019 às 13:12
  • Ah sim. Faz sentido. Tem razão. Commented 9/10/2019 às 13:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .