Output order changes after the event triggered

Question

I'm new to solidity so for educational purpose I'm developing EVoting application. I've written a smart contract for candidate registration and also developed UI for getting the registered candidate list in the form of table on web page.

I've written event such that after registering new candidate the event triggers and by using which I'm adding that record to the table dynamically.

Now what happen is whenever event triggers I get newly added candidate in the table but the order of candidates changes i.e. table rows take random positions like instead of 1,2,3,4 it shows 3,4,2,1 etc.

Then I need to refresh page several times to get it done properly.

This is my table code,

<table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Age</th>
                                <th>Street Address</th>
                                <th>District</th>
                                <th>State</th>
                                <th>Pincode</th>
                                <th>Vote Count</th>
                            </tr>
                        </thead>
                        <tbody id=candidatesResults>
                        </tbody>
                    </table>

This is the JavaScript to add records to table,

App.contracts.RegisterCandidate.deployed().then(function(instance) 
      {
        registerCandidateInstance = instance;
        return registerCandidateInstance.candidatesCount();
      }).then(function(candidatesCount) {
        var candidatesResults = $("#candidatesResults");
        candidatesResults.empty();


        for (var i = 1; i <= candidatesCount; i++) {
          registerCandidateInstance.getCandidate(i).then(function(candidate) {
            var id = candidate[0].toNumber();
            var name = candidate[1];
            var age = candidate[2].toNumber();
            var street_address = candidate[3];
            var district = candidate[4];
            var state = candidate[5];
            var pincode = candidate[6].toNumber();
            var voteCount = candidate[7].toNumber();

            // Render candidate Result
            var candidateTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + age + "</td><td>" + street_address + "</td><td>" + district + "</td><td>" + state + "</td><td>" + pincode + "</td><td>" + voteCount + "</td></tr>"
            candidatesResults.append(candidateTemplate);
          });
        } 

Please Help !!!

Answer 1

Since your calls to getCandidate() are asynchronous - you're calling each item without waiting for the previous result - you can't be sure that the order you request the data will match the order you get the data back.

Add some extra logic to make sure your table shows the rows in the right order. For instance:

• Add an attribute to each row called data-id, set to the ID of the candidate you'd adding.
• When you add a new row, instead of just appending it to the end, iterate the rows in the table backwards until you find a row with a lower data-id than the ID of the row you are adding (or until you run out of rows)
• Add your new row after that row.

Alternatively, if your contract has a call to tell you the number of candidates and you know there are no gaps, you might be better calling that first, rendering the table with the correct number of rows but no data, and then making the calls for data for each candidate, and using it to populate the row with the right index (eg if you get candidate #6, populate row #6 in your table).