0

Galera estou com um controller, onde eu busco dados do firebase, porém ao fazer essa busca o código sofre um delay e a página é carregada antes com dados vazios antes da consulta de fato acabar.

Meu controller :

function DashboardController($http, $scope){

    var vm = this;
    vm.searchJedi = searchJedi;
    vm.obj = [];
    vm.jedi = {
        master: '',
        name: '',
        planet: '',
        status
    }
    vm.teste = [];

   vm.searchJedi();

    function searchJedi(){
        db.collection("jedi").get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                vm.jedi = doc.data();
                vm.obj.push(vm.jedi);
            });
            console.log(vm.obj); //objeto com valor
        });

        console.log(vm.obj); //objeto vazio 
    }
}

O que acontece é que esse último console sempre está vazio enquanto o console que está dentro do db.collection vem preenchido após a busca sofrendo um delay. Dessa forma na página HTML os dados não são mostrados.

Alguma dica?

1 Resposta 1

1

O db.collection("jedi").get() retorna para você uma Promise que é um dado assíncrono e que realmente não irá aparecer de imediato. Através do .then você consegue o valor e enquanto ele está sendo executado o resto do código externo a ele também está seguindo, como o seu console.log que está vazio e a renderização do seu HTML. Minha sugestão é que você crie uma animação de loading pro HTML que comece antes de buscar o dado com o db.collection e termine após a sua inclusão no vm.obj.push(vm.jedi). Exemplo:

var loading;
function searchJedi(){
    loading = true;
    db.collection("jedi").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            vm.jedi = doc.data();
            vm.obj.push(vm.jedi);
        });
        loading = false;
    });
}

Sendo esse loading tratado no HTML para aparecer assim por exemplo: <div ng-if="loading ">Carregando...</div>

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 .