Displaying MYSQL table data dynamically through JSON, Jquery and PHP

Question

I am trying to display the contents of a "users" table in my MYSQL database using PHP,JQUERY and JSON.

Here is the PHP file:

<?php

  $host = "localhost";
  $user = "root";
  $pass = "";

  $databaseName = "ITSM";
  $tableName = "signup_and_login_table";


  include 'database_connection.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

 $result = mysql_query("SELECT * FROM $tableName");           
 $array = mysql_fetch_row($result);                          


  echo json_encode($array);

?>

On my HTML page i have a simple table im trying to target:

<table id="personDataTable">
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>

    </table>

This is the jquery ajax, I want it to loop through all the users and other table entities to display all the contents of the Database table on the page, Im currently just getting "undefined".

 $(function ()
 {


  $.ajax({
     url: 'CMGetdata.php',                  
     data: "",                        
     dataType: 'json',                
     success: function(data, textStatus, jqXHR) {

        drawTable(data);
    }
   });

 });

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

console.log("test");
function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); 
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));
}

Any assistance to be pointed in the correct direction would be greatly appreciated thanks.

Answer 1

Try This-

$result =$con->query("SELECT * FROM tableName"); 
$array = $result ->fetch_all(MYSQLI_ASSOC);          
foreach($array as  $array)
{
   $array['example'];
    //another         
 }