Как предотвратить отображение дублирующихся строк в HTML? - PullRequest
Новая
       51

Как предотвратить отображение дублирующихся строк в HTML?

0 голосов
/ 24 июня 2019

Я следовал и закончил этот урок https://github.com/dappuniversity/election/tree/2019_update. Однако в конце появляются дублирующиеся строки, когда я добавляю новые голоса (показано на рисунке).

Candidate 1 and Candidate 2

Я не знаком с dApps, веб-разработкой или javascript, поэтому не знаю, где моя ошибка.

Код от https://github.com/dappuniversity/election/tree/2019_update.

Я не знаю, откуда появились новые строки, и я пытаюсь предотвратить это.

1 Ответ

0 голосов
/ 26 июня 2019

проблема заключается в асинхронном характере JavaScript, приложение не ожидает ответа блокчейна перед удалением старого, так что происходит то, что данные вставляются в 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);
  })
...