Candidates are displayed on the screen in duplicate

[Krlucete]

[asdimitrov13]

I have noticed the same thing, I think it's got something to do with the async calls from the promises, however, I couldn't identify the root of the problem myself.

[bardawilpeter]

You can just update the listenEvent to the below and it will work:

listenForEvents: function() {
App.contracts.Election.deployed().then(function(instance) {
// Restart Chrome if you are unable to receive this event
// This is a known issue with Metamask
// MetaMask/metamask-extension#2393
instance.votedEvent({}, {
fromBlock: 'latest',
toBlock: 'latest'
}).watch(function(error, event) {
console.log("event triggered", event)
// Reload when a new vote is recorded
App.render();
});
});
},

[popeyebot]

Thanks peter0o, it is prefect !

[ghost]

@bardawilpeter But if you change account and refresh again, the first refresh double render again.

[yodaster]

@bardawilpeter I agree with killermu94. As soon as you do the first refresh, it is still double rendered. The second refresh works correctly

[dwbelliston]

I also had this issue, another fix is to handle the promises differently. Group all the promise calls to get candidates to an array, then waiting until all of them are resolved to add them to the dom.

    ...
    // Load contract data
    App.contracts.Election.deployed().then(function (instance) {
      electionInstance = instance;
      return electionInstance.candidatesCount();
    }).then(function (candidatesCount) {

      // Store all promised to get candidate info
      const promises = [];
      for (var i = 1; i <= candidatesCount; i++) {
        promises.push(electionInstance.candidates(i));
      }

      // Once all candidates are received, add to dom
      Promise.all(promises).then((candidates) => {
        var candidatesResults = $("#candidatesResults");
        candidatesResults.empty();

        var candidatesSelect = $('#candidatesSelect');
        candidatesSelect.empty();

        candidates.forEach(candidate => {
          var id = candidate[0];
          var name = candidate[1];
          var voteCount = candidate[2];

          // Render candidate Result
          var candidateTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + voteCount + "</td></tr>"
          candidatesResults.append(candidateTemplate);

          // Render candidate ballot option
          var candidateOption = "<option value='" + id + "' >" + name + "</ option>"
          candidatesSelect.append(candidateOption);          
        })
      });

      return electionInstance.voters(App.account);
    }).then(function (hasVoted) {
    ...

[moseley]

I added a watch event for account change. Added App.listenForAccountChange() in the initContract function.

listenForAccountChange: function() {
    ethereum.on('accountsChanged', function (accounts) {
        App.account = accounts[0];
        App.render();
    })
},