0

In the code/example below, how can I access the likecount variable that's defined inside the db.collection()...then() method? I feel like I've tried every solution on the internet, but I've always gotten undefined as the result.

Code:

var parsed = path.split("/");

var likecount; 

db.collection(parsed[0]).doc(parsed[1]).collection(parsed[2]).doc(parsed[3]).collection("likes").get().then(function(querySnapshot) {

  likecount = querySnapshot.size

  console.log(likecount)
})

The whole code (included where I try to access likecount):

firebase.auth().onAuthStateChanged(function(user) {

    var query = db.collectionGroup("userPosts")

    query.get().then(querySnapshot => {
        setupPosts(querySnapshot.docs)
    })

    const posts = document.querySelector('.posts');

    const setupPosts = (data) => {
        let html = '';
        data.forEach(doc => {
            const post = doc.data();
            const picURL = post.picURL;
            var path = doc.ref.path;

            var parsed = path.split("/");

                var likecount; 

                db.collection(parsed[0]).doc(parsed[1]).collection(parsed[2]).doc(parsed[3]).collection("likes").get().then(function(querySnapshot) {

                    likecount = querySnapshot.size

                    console.log(likecount)
                })

            let li = `<li class="post">
                <h3 class="content">${post.content}</h3>
                <button class="comment" onclick="comment('${path}')">Comment</button>
                <button class="like" onclick="like('${path}')">Like</button>
                <span class="like-count">${likecount}</span>`;
            
            li += (post.picURL ? `<img class="img" src="${picURL}" onclick="openImage('${picURL}')">` : ``);
            li += `</li><br></br>`;
            html += li
        })
        
        posts.innerHTML = html;
    }
Daniel Olsen
  • 1
  • 1
  • Can you show us the code where you're getting `undefined`? Chances are you're trying to access it before it gets set. – phuzi Dec 23 '20 at 12:33
  • I don't think there's anything wrong with your `then` usage. If you log query Snapshot what do you get? – spirift Dec 23 '20 at 12:35
  • @phuzi I added the code where I'm getting undefined now (the span in the li) – Daniel Olsen Dec 23 '20 at 12:53
  • 1
    You can't. You will have to use the appropriate asynchronous code. You can't do what you're trying to do because this line ``;` runs *before* this line `likecount = querySnapshot.size`. Look into [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all). – Jared Smith Dec 23 '20 at 12:56
  • So Jared, how can I prevent `````` to run before ```likecount = querySnapshot.size```, so I can append the likecount with the value from the database in the span? – Daniel Olsen Dec 23 '20 at 13:00
  • 1
    Put the code that updates the DOM *inside* the `.then()`. – Pointy Dec 23 '20 at 13:05
  • So, in my case the li will go inside the ```.then()```, as well as ```posts.innerHTML = html;```? – Daniel Olsen Dec 23 '20 at 13:06
  • 1
    @Pointy, it seems like it worked! Thanks a lot! – Daniel Olsen Dec 23 '20 at 13:17

0 Answers0