How to prevent duplicate rows from being displayed in html?

Question

I've followed and completed this tutorial https://github.com/dappuniversity/election/tree/2019_update. However, duplicate rows show up at the end when I'm adding new votes in (shown in picture).

I'm not familiar with dApps, web development, or javascript so I don't know where my error is.

Code from https://github.com/dappuniversity/election/tree/2019_update.

I don't know where adding the new rows came in and I'm trying to prevent it.

i followed the github link above. it's in the github – help please Jun 24 '19 at 18:04 — help please, Jun 24 '19 at 18:04

score 0 · Answer 1 · answered Jun 26 '19 at 15:54

the problem is in the asynchronous nature of JavaScript the app is not waiting for the response of the blockchain before removing the old so what happens is that the data get inserted to the dom two times, the 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.

 App.contracts.Election.deployed()
  .then(function(instance) {
    electionInstance = instance;
    return electionInstance.candidatesCount();
  })
  .then(function(candidatesCount) {
    const promises = [];
    // Store all prosed to get candidate info
    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);
  })

How to prevent duplicate rows from being displayed in html?

1 Answers1