Callback function returning data in reverse order

Question

Starting from the end:

I'm trying to create something like this:

EXPECTED RESULT

<td id="Cell_0">AAA - 0</td>
<td id="Cell_1">BBB - 1</td>
<td id="Cell_2">CCC - 2</td>
<td id="Cell_3">DDD - 3</td>
<td id="Cell_4">EEE - 4</td>

But this is what I'm getting instead:

WRONG OUTPUT

<td id="Cell_4">EEE - 4</td>
<td id="Cell_3">DDD - 3</td>
<td id="Cell_2">CCC - 2</td>
<td id="Cell_1">BBB - 1</td>
<td id="Cell_0">AAA - 0</td>

I have a txt file in a server with a simple list of names, say 5 names:

AAA,BBB,CCC,DDD and EEE.

My code retrieves that data from the server and then creates a table to display that data.

The table is created setting id's to its cells, according to the number of names in the txt file.

The cells are created in a "for loop", with ids numbered from zero to the maximum number of names (minus 1).

The user can add/delete names to/from that list, which is then saved back in the server (the txt file).

The problem is: even though the loop starts from zero, the ids are created in a reverse order, so are the names listed in a reverse order.

The td cells are created on the fly, using javascript, but if I code the table with html and just make the code fullfill the data retrieved then it all works just fine.

This is the code I use:

HMTL 1

<table>
    <tbody id="My_Table">
    </tbody>
</table>

HTML 2

<table>
    <tbody id="My_Table">
        <tr>
            <td id="Cell_0"></td>
            <td id="Cell_1"></td>
            <td id="Cell_2"></td>
            <td id="Cell_3"></td>
            <td id="Cell_4"></td>
        </tr>
    </tbody>
</table>

JAVASCRIPT

var sNames, iTotal;

fRetrive_Data_From_Server("Names.txt", fCallback_Names);


function fRetrive_Data_From_Server(sFile, fFunction){
    let httpRequest = new XMLHttpRequest;
    httpRequest.open("GET", sFile);
    httpRequest.setRequestHeader('Cache-Control', 'no-cache, no-store, max-age=0');
    httpRequest.onload = fFunction;
    httpRequest.send();
}

function fCallback_Names(){
    let sData_Temp = this.response;
    sNames = sData_Temp .split(",");
    iTotal = sNames.length;

    fCreate_Table();
//  fFill_Table();
}

function fCreate_Table(){
    let hTable = document.getElementById("My_Table");
    let hRow, hCell;
    for (let iElement = 0; iElement < iTotal; iElement++){
        hRow = hTable.insertRow(0);
        hCell = hRow.insertCell(0);
        hCell.setAttribute("id", "Cell_" + iElement);
        hCell.innerHTML = sNames [iElement] + " - " + iElement;
    }
}

function fFill_Table(){
    let hTable = document.getElementById("My_Table");
    let hCell;
    for (let iElement = 0; iElement < iTotal; iElement++){
        hCell = document.getElementById("Cell_" + iElement );
        hCell.innerHTML = sNames [iElement] + " - " + iElement;
    }
}

If I use HTML 2 and call fFill_Table the code works as expected, so the table are shown as EXPECTED RESULT.

But I need to use HTML 1 and call fCreate_Table, which gives me WRONG RESULT.

How to make the code in fCreate_Table to show the names from 0 to 4?

Answer 1

All your table rows are inserted at index 0. Omit the index to append.

function fCreate_Table(){
    let hTable = document.getElementById("My_Table");
    let hRow, hCell;
    for (let iElement = 0; iElement < iTotal; iElement++){
        hRow = hTable.insertRow();
        hCell = hRow.insertCell();
        hCell.setAttribute("id", "Cell_" + iElement);
        hCell.innerHTML = sNames [iElement] + " - " + iElement;
    }
}