Browser is parsing the wrong HTML content-CodePudding

I want to write a function that first retrieves all account data from my database, and then sorts them into a user-friendly HTML table. There, the user can select some accounts, and change them. Here's my code:

$.ajax({
    url: "./database.php",
    type: "POST",
    data: {
        todo: "adminGetAccountTable",
        b: userInfo["UserId"],
        c: userInfo["Password"],
        session: userInfo["SessionName"]
    },
    success: function(response) {
        $("#loadingIcon").css("display", "none");
        console.log(response);
        if (response !== "No accounts registered") {
            var json = JSON.parse(response);
            var accountsTable = "<table class='w3-table-all' id='accountsTable'><thead><tr><th>&nbsp;</th><th><b class='link link-primary' id='00'>NUTZER-ID&nbsp;</a></th><th><b class='link link-primary' id='01'>ERSTELLDATUM&nbsp;</a></th><th><b class='link link-primary' id='02'>NAME&nbsp;</a></th><th><b class='link link-primary' id='03'>VORNAME&nbsp;</a></th><th><b class='link link-primary' id='04'>E-MAIL-ADRESSE&nbsp;</a></th><th><b class='link link-primary' id='05'>GESAMTSTUNDEN&nbsp;</a></th><th><b class='link link-primary' id='06'>ACCOUNTTYP&nbsp;</a></th></tr></thead><tbody>";
            var index = 0;
            for (var current in json) { // 'json' is the data coming from my database
                accountsTable  = "<tr>";
                accountsTable  = "<td><input type='checkbox' onchange='toggleSelectedEntry("   index   ", true);'></td>";
                // More user information gets written here
                index  ;
            }
            accountsTable  = "</tbody></table>";
            document.getElementById("accountsDiv").innerHTML  = accountsTable; // Add the table to the div container
        }
    }
});

The entries all have a unique id (the current index). The function toggleSelectedEntry() then adds/removes the entry from an array that stores all the selected entries.

The only problem is that the browser parses this argument wrong. Instead of parsing 0, 1, 2, 3, 4 and so on, it parses them in a weird order: 0, 4, 1, 2, 3. What's strange is that when executing console.log(accountsTable), the indexes are displayed in the right order. Only once it's written and parsed by the browser, this weird order appears.

Does someone know what could cause this? I can also send more code if that helps, I just didn't want to clutter my question too much.

Edit: Here's the code from database.php that I use to obtain the data:

$stmt = $this->connection->prepare("SELECT UserId, Created, FirstName, LastName, Email, IF(PermissionId = 2, 'Admin', 'Nutzer') AS PermissionString FROM users");
$stmt->execute();
$stmtResult = $stmt->get_result();
$rows = array();
while ($r = mysqli_fetch_assoc($stmtResult)) {
    $rows[] = $r;
}
if ($rows == array()) {
    error_log("Cancelled Interaction: No accounts registered");
    echo("No accounts registered");
    exit;
} else {
    foreach ($rows as &$value) {
        foreach ($value as &$field) {
            $field = utf8_encode($field);
        }
    }
    $outputValue = json_encode($rows, JSON_UNESCAPED_UNICODE);
    echo(utf8_decode($outputValue));
    exit;

This returns something like:

[{"UserId":"61fe559d1dd35\u0000\u0000\u0000","Created":"2022-02-05 11:46:53","FirstName":"Nico","LastName":"Marikucza","Email":"[email protected]","PermissionString":"Admin"},{"UserId":"62041298682a0\u0000\u0000\u0000","Created":"2022-02-09 20:14:32","FirstName":"Peter","LastName":"Marikucza","Email":"[email protected]","PermissionString":"Nutzer"}]

CodePudding user response：

I figured it out myself (with help from the comments).

I found out I was using a function in JS to sort the data in order of LastName ascending. But this mismatched the output of the database, which led the program to assign the numbers incorrectly. I fixed this by simply ordering the output via MySQL as well:

SELECT UserId, Created, FirstName, LastName, Email, IF(PermissionId = 2, 'Admin', 'Nutzer') AS PermissionString FROM users ORDER BY LastName ASC