1

Preciso alimentar uma variável com o conteúdo do campo "site" do documento pré selecionado em uma coleção "restaurants" no Firestore, para depois disponibilizar o hiperlink do site com a tag <a>. O problema é que a variável x fica sempre vazia. Segue parte do código:

<div class="details">
                   <span class="light">●</span>
                   <span data-fir-content="fone"></span>
                   <span class="black">●</span>
                   <span id="site" data-fir-content="site">
</div>
<script>
    var x = db.collection("restaurants").where("site", "==", true).get("site");
    var orderlink = x;
</script>
<a style="font-size:large;align-content:center" href="http://" onclick="location.href = this.href + orderLink; return false;">
    Ir para o Site 
</a>

1 Resposta 1

1

Não posso garantir que sua query esteja retornando o resultado esperado, mas o problema que vejo no exemplo é que você está realizando uma operação de entrada/saída, e não está esperando pela resolução dessa operação.

Entenda que JavaScript roda em um único Thread, o que significa que JavaScript não consegue fazer operações em paralelo.

Se você fosse esperar pela resolução do get, o seu programa ficaria travado até que você recebesse todo o conteúdo do Firestore, mas na maior parte desse tempo seu programa fica pendente. Esse tempo poderia ser aproveitado para executar outros comandos e melhorar a experiencia dos usuários, por isso esse tipo de operação sempre é feita de forma assíncrona.

Então no seu caso, pela API do Firestore, dá para ver que o método get retorna uma Promise. Você pode utilizar o método then da Promise para passar um callback que será invocado quando a operação de entrada/saída for concluída. Esse código não é executado sequencialmente, ele será invocado eventualmente:

var orderlink = '';
db.collection("restaurants").where("site", "==", true).get("site").then(x => {
    orderlink = x;
})

Melhoria:

Como o "link" só será válido após o callback ser invocado, você poderia deixar a sua ancora <a> desabilitada, sem onclick, e então adicionar o handler desse evento assim que a sua resposta do Firestore retornar:

<script>
    db.collection("restaurants").where("site", "==", true).get("site").then(x => {
        document.getElementById('firestore-link').onClick = () => {
            location.href = 'http://' + x; 
            return false;
        }
    })
</script>

<a id="firestore-link" style="font-size:large;align-content:center" href="#">
    Ir para o Site 
</a>
1
  • Obrigado pela ajuda @peter! o maior problema continua sendo que a variável "X" não está sendo carregada. testei com alert(x) e sempre vazia. Se uso a tag <span data-fir-content="site"></span> funciona ok. Se tiver uma forma de alimentar "X" com retorno do span acima também deve resolver o problema... data-fir-content definido em script externo ao index.html. 8/02/2020 às 14:43

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 .