0

Como percorrer os dados de um Observable e inserir em uma lista?

Gostaria de montar uma lista com todos os arrays que contém dentro do Observable que vem do Cloud Firestore, pois preciso de uma lista com as pessoas para exibir em MatTableDataSource.

export interface Pessoa {
     nome: string;
     cidade: string;
}

    export MyClass {
        list_pessoa: Pessoa[] = [];
        pessoa: Observable<Pessoa[]>;

        constructor(){

    // Algo parecido como isso, mas que funcione!
    this.pessoa.forEach(v =>{
      const d = v.values()
      this.list_pessoa.push(d);
    })

    console.log(this.list_pessoa);

}
}

Saída: list_pessoa [ {'nome': 'pessoa1', 'cidade': 'cidade1'},
{'nome': 'pesssoa2', 'cidade': 'cidade2'} ]


  • Qual a melhor forma de percorrer os dados que estão dentro do Observable e inserir em uma lista de arrays?

2 Respostas 2

0

Você pode fazer a iteração se inscrevendo para a resposta do Observable assim:

export interface Pessoa {
     nome: string;
     cidade: string;
}

export MyClass {
    list_pessoa: Pessoa[] = [];
    pessoa: Observable<Pessoa[]>;

    constructor(){

    this.pessoa
     .subscribe(res => this.list_pessoa = res);

    console.log(this.list_pessoa);
    }
}

Método de retorno:

  getPessoas() {

    this.pessoasCol = this.afs.collection('pessoas', ref => ref.orderBy('nome', 'asc'));

    this.pessoas = this.pessoasCol.snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Pessoa;
        data.id = a.payload.doc.id;
        return data;
      });
    });

    return this.pessoas;
  }

A chamada do método é feita da seguinte forma:

this.pessoa = this.providerPessoa.getPessoas();
1
  • Olá Arnaldo, agradeço desde já a intenção de querer ajudar mas não esta retornando nada do Observable usando subscribe, de uma olhada acima no método que retorna o Observable caso for preciso. 18/01/2018 às 16:04
-1

Para percorrer os dados de um Observable e inserir em uma lista, você pode usar o método subscribe() do Observable e implementar um callback que receberá os dados do Observable. Então, dentro deste callback, você pode iterar sobre os dados e adicioná-los à sua lista. Aqui está um exemplo de como fazer isso:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Pessoa } from './pessoa.interface';

@Component({
  selector: 'app-root',
  template: `{{list_pessoa | json}}`
})
export class AppComponent {
  list_pessoa: Pessoa[] = [];
  pessoa: Observable<Pessoa[]>;

  constructor() {
    this.pessoa.subscribe((data: Pessoa[]) => {
      data.forEach((pessoa: Pessoa) => {
        this.list_pessoa.push(pessoa);
      });
    });
  }
}

Neste exemplo, o método subscribe() recebe um callback que recebe os dados do Observable pessoa. Dentro deste callback, nós iteramos sobre os dados e adicionamos cada pessoa à nossa lista list_pessoa. Note que subscribe() é chamado uma única vez na inicialização do componente. A saída esperada é uma lista de objetos Pessoa.

Uma forma comum de percorrer os dados de um Observable e inseri-los em uma lista de arrays é usando o operador subscribe() do Observable.

Veja um exemplo de como fazer isso:

export interface Pessoa {
  nome: string;
  cidade: string;
}

export class MyClass {
  list_pessoa: Pessoa[] = [];
  pessoa: Observable<Pessoa[]>;

  constructor(private db: AngularFirestore) {
    this.pessoa = db.collection<Pessoa>('pessoas').valueChanges();
    this.pessoa.subscribe(pessoas => {
      this.list_pessoa = pessoas;
    });
  }
}

Nesse exemplo, é feita uma consulta à coleção "pessoas" do Cloud Firestore usando o método valueChanges() do AngularFirestore, que retorna um Observable contendo as pessoas da coleção. O operador subscribe() é usado para percorrer os dados do Observable e atribuí-los à lista list_pessoa. O código acima assume que você já tem uma instância do AngularFirestore injetada em sua classe.

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 .