Q:

Acquire JSON data into html using JQuery

I have this php/json file that i call users-json.php.
<?php
include_once('../functions.php');
if (!empty($_GET['id'])) {
$GetID = $_GET['id'];
$query = "SELECT Username, Firstname  WHERE UserID = :ID";
$stmt = $db->prepare($query);
$stmt->execute(array(':ID' => $GetID));
} else {
$query = "SELECT Username, Firstname FROM users";   
$stmt = $db->prepare($query);
$stmt->execute();
}
$userData = array();
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){

      $userData[] = $row;
}
//udskriv bruger data som JSON
echo json_encode($userData);
?>

Json output:
[{"Username":"Admin","Firstname":""},{"Username":"Bruger","Firstname":"Ole"}]

I Want it to display the data in a list like this, by using jquery.
+----+----------+-----------+----------+
| id | username | firstname | lastname |
+----+----------+-----------+----------+

I have tried this on my own so far but it does not seem to work.

A:

You can use with php and javascript
Javascript/JQuery
After you got your $userData, You need to use $.parseJSON(); to parse the json into object, you have to use JQuery. Because your JSON are in php variable, you need to change that into javascript variable.
<?php
 $userdata = '[{"Username":"Admin","Firstname":""},{"Username":"Bruger","Firstname":"Ole"}]' 
?>

And your javascript would be like this, note that, you have to use JQuery Libaray to make this thing works
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  var data = '<?php echo $userdata ?>';
    var json = $.parseJSON(data);
        var html= "";

     for(i=0,no=1;i<Object.keys(json).length;i++){
     html+='<tr><td>'+json[i].Username+'</td><td>'+json[i].Firstname+'</td></tr>';
     }
    $('#data').html(html);
    </script>

And your html 
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<style type="text/css">
   table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
  }
  </style>
<body>
<table border="1">
<thead>
  <tr>
    <td>
    Username
    </td>
    <td>
    FIrstname
    </td>
  </tr>
  </thead>
  <tbody id="data">  
  </tbody>
</table>
</body>
</html>

Summary
<?php
     $userdata = '[{"Username":"Admin","Firstname":""},{"Username":"Bruger","Firstname":"Ole"}]'
?>
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<style type="text/css">
       table {
        border-collapse: collapse;
    }

    table, td, th {
        border: 1px solid black;
      }
      </style>
<table border>
  <tr>
    <td>
    Username
    </td>
    <td>
    FIrstname
    </td>
  </tr>
  <tbody id="data">  
  </tbody>
</table>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  var data = '<?php echo $userdata ?>';
    var json = $.parseJSON(data);
        var html= "";

     for(i=0,no=1;i<Object.keys(json).length;i++){
     html+='<tr><td>'+json[i].Username+'</td><td>'+json[i].Firstname+'</td></tr>';
     }
    $('#data').html(html);
    </script>
</html>

