To implement this functionality, you can utilize a combination of PHP and JavaScript.
Using JavaScript/JQuery:
Once you have retrieved your JSON data in the $userData variable within PHP, you will need to use $.parseJSON(); method from JQuery to parse the JSON into an object suitable for manipulation with JavaScript. Since the JSON is stored in a PHP variable initially, it needs to be converted into a JavaScript variable for further processing.
<?php
$userdata = '[{"Username":"Admin","Firstname":""},{"Username":"Bruger","Firstname":"Ole"}]'
?>
Your JavaScript code should resemble the following. Please make sure to include the JQuery library for proper functioning of the code.
<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>
You also need to structure your HTML as follows:
<!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>
In Conclusion:
<?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>