Calling up a Table with AJAX

Question

So Im trying to display a table when the user clicks on a image. I came pretty far, but Im stuck and cant seem to find my mistake.

When I open up my console I get the following error:

Now Hannibal is part of the group of users I want to display in the table.

I wont post the entire code, since its alot. Ill try to keep it to the relevant parts. In this case I know that I get into my .php file that executes the query.

Since I tested the Query, I know it works so Ill just show how I give it back in my separate .php File:

$Guest_Invite_Data = filterTable($List_Guests_Query);
$Guest_Invite_Data_fetched = mysqli_fetch_array($Guest_Invite_Data);

echo json_encode($Guest_Invite_Data_fetched);

function filterTable($query)  
{   
    $filter_Result = mysqli_query($GLOBALS['connect'], $query);
    return $filter_Result;
}    

And heres part of my jQuery:

success:function(Guest_Invite_Data_fetched) {
    createTableByJqueryEach2(Guest_Invite_Data_fetched);
},

And heres my function:

function createTableByJqueryEach2(data2){

    var eTable2="<table><tr><th colspan='5'>Gäste einladen</th></tr><tr><th>Person</th></tr>"
    $.each(data2,function(index2, row2){

        eTable2 += "<tr>";
        $.each(row2,function(key2,value2){
            eTable2 += "<td>"+value2+"</td>";
        });
     eTable2 += "</tr>";
    });
    eTable2 +="</table>";
    $('#guest_table').html(eTable2);
 }

Does anybody spot my mistake?

Edit: Picture of Output as requested

Edit 2: Text of the Output as requested

Array ( [0] => Hannibal [firstname] => Hannibal [1] => Lecter [lastname] => Lecter [2] => Cannibals Inc. [name] => Cannibals Inc. ) {"0":"Hannibal","firstname":"Hannibal","1":"Lecter","lastname":"Lecter","2":"Cannibals Inc.","name":"Cannibals Inc."}

Answer 1

Using the following as test code I find two things:

a. You're fetching both indexed and associative arrays from the database. Note in your JSON the numbered index and value, followed by the associative (column name) and value:

"0":"Hannibal","firstname":"Hannibal"

You should only fetch what you want. For example, I'd use mysqli_fetch_assoc() here - giving me columns names and values.

b. You are looping through the data and then trying to loop through the resulting text:, which is what causes the error. For example, row2 on the first iteration contains the value Hannibal, so you second loop is essentially trying to do this:

$.each('Hannibal',function(key2,value2){...

Hannibal, just being text, cannot be looped through like this. It has no keyss or values.

You only need one loop for this data. Here is the test code proving this out:

var guest_data =  {"0":"Hannibal","firstname":"Hannibal","1":"Lecter","lastname":"Lecter","2":"Cannibals Inc.","name":"Cannibals Inc."};

function createTableByJqueryEach2(data2){

    var eTable2="<table><tr><th colspan='5'>Gäste einladen</th></tr><tr><th>Person</th></tr>"
    $.each(data2,function(index2, row2){

        eTable2 += "<tr>";
        eTable2 += "<td>"+row2+"</td>";
        eTable2 += "</tr>";
    });
    eTable2 +="</table>";
    $('#guest_table').html(eTable2);
 }

 createTableByJqueryEach2(guest_data);

This results in the following:

<div id="guest_table">
    <table>
        <tbody>
            <tr>
                <th colspan="5">Gäste einladen</th>
            </tr>
            <tr>
                <th>Person</th>
            </tr>
            <tr>
                <td>Hannibal</td>
            </tr>
            <tr>
                <td>Lecter</td>
            </tr>
            <tr>
                <td>Cannibals Inc.</td>
            </tr>
            <tr>
                <td>Hannibal</td>
            </tr>
            <tr>
                <td>Lecter</td>
            </tr>
            <tr>
                <td>Cannibals Inc.</td>
            </tr>
        </tbody>
    </table>
</div>

It is likely you want to have a different layout, this is just what I did to prove out the error.