why does javascript loop function result from firebase database keeps replicating itself

Question

I have a Javascript loop function

 firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

      var BusinessesId = firebase.auth().currentUser.uid;
      var ref = database.ref('/Jobs/');
    ref.on('value', ApplicationData,  errData);

  }
  })

         function JobData(data) { 

              var container = document.getElementById('Jobs'); 

              data.forEach(function(JobSnap) { // loop over all jobs
                var key = JobSnap.key;
                var Jobs = JobSnap.val();
                var newCard = `
                       <div class="thumbnail" id="${key}">
                           <span class="folder"><span class="file"></span></span>
                           <div class="title" id="Jobs">${Jobs.JobTitle}</div>
                        </div>
                    `;
              container.innerHTML += newCard;
              console.log(key);
              })
            }

that displays this

What I noticed is that whenever I leave the page on for some hours, the folders would have been multiplied. is like the everything is duplicated again. The longer I left it opened the more the retrieved data duplicates itself. for example, if I left the webpage opened and walked away for about an hour or so by the time i come back their will be two duplicates of each folder showed below. What is causing this and how can I stop it?

Aleksander Rezen · Accepted Answer · 2017-05-06 01:27:13Z

1

You are calling function on this event, so my guess, state changes again and call is made again.

firebase.auth().onAuthStateChanged()

and then you append thumbnails to container

container.innerHTML += newCard;

you can reset the content like this

var container = document.getElementById('Jobs'); 
container.innerHTML = '';

or look into why event .onAuthStateChanged() is fired again.

answered May 6, 2017 at 1:27

Aleksander Rezen

9278 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ola Over a year ago

where exactly are you suggesting that I put container.innerHTML = '';

Aleksander Rezen Over a year ago

right after var container = document.getElementById('Jobs');, just like i have in the answer

Collectives™ on Stack Overflow

why does javascript loop function result from firebase database keeps replicating itself

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related