Print sql table with JSON - php

Question

I want to print all sql table and show them in html table. I am new in php, JSON and AJAX. I send username successfully and get result in php. I think there is a problem in JSON part or AJAX. Can anyone help me?
index.php
<div class="col-lg-6">
<p id="usr" style="color:gray; font-size: 48px;"></p>
<script type="text/javascript">
var usr = document.getElementById("dom-target");
var username = usr.textContent;
username = username.trim().replace(/ /g, '%20');
document.getElementById("usr").innerHTML = username;
var sendtophp = "username="+username;
$.ajax({
type: "POST",
url: "getcoursetable.php",
data: sendtophp,
dataType:"json",
success: function(response) {
console.log(response);
var trhtml ='';
document.getElementById("demo").innerHTML = response;
$.each(response, function (i, item) {
trHTML += '<tr><td>' + item.cname + '</td><td>' + item.subject + '</td><td>' + item.course + '</td><td>'+ item.grade + '</td></tr>';
});
$('#results').append(trHTML);
}
});
</script>
<table id="results"></table>
</div>
getcoursetable.php
<?php
include_once "connection.php";
if(isset($_POST["username"])){
$nick = $_POST["username"];
$prep = "SELECT * FROM `enrolledtable` WHERE nickname='$nick'";
$results = mysqli_query($con, $prep);
$jsonData = array();
while ($row = $results->fetch_row()) {
$jsonData[] = $row;
}
echo json_encode($jsonData);
}
?>
Now, I can print data but not like a table, like that
<p id="demo">denemee,CS,300,B,denemee,CS,301,B ,denemee,CS,305,B ,denemee,CS,307,B,denemee,CS,408,A-,denemee,IE,208,B ,denemee,MATH,306,B</p>

Answer 1

your ajax function is looking for data of type json so you need to declare this at the top of getcoursetable.php
header('Content-Type: application/json');

Answer 2

The problem might sit around here :
console.log(response);
var trhtml ='';
document.getElementById("demo").innerHTML = response;
$.each(response, function (i, item) {
trHTML += '<tr><td>' + item.cname + '</td><td>' + item.subject + '</td><td>' + item.course + '</td><td>'+ item.grade + '</td></tr>';
});
$('#results').append(trHTML);
First, JavaScript is a Case Sensitive language : trhtml and trHTML are not the same variables.
Second, if your sentence "output of php" means you reported the output of console.log(), then response look like a string to me, you must make it parsed as Json.
Moreover, I don't know what the beginning of the string denemee is but it breaks the Json notation.

Answer 3

I solve my problem. This can take table in php and create html table.
index.php
<div class="col-lg-6">
<p id="usr" style="color:gray; font-size: 48px;"></p>
<script type="text/javascript">
var usr = document.getElementById("dom-target");
var username = usr.textContent;
username = username.trim().replace(/ /g, '%20');
document.getElementById("usr").innerHTML = username;
var sendtophp = "username="+username;
$.ajax({
type: "POST",
url: "getcoursetable.php",
data: sendtophp,
dataType:"json",
success: function(response) {
var trhtml ='';
$.each(response, function (i, item) {
trhtml += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td><td>'+ item[2] + '</td></tr>';
});
$('.append').append(trhtml);
}
});
</script>
<table id="results">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Course</th>
<th>Grade</th>
</tr>
<tbody class="append">
</tbody>
</table>
</div>
getcoursetable.php
<?php
header('Content-Type: application/json');
include_once "connection.php";
if(isset($_POST["username"])){
$nick = $_POST["username"];
$prep = "SELECT subject,course,grade FROM `enrolledtable` WHERE nickname='$nick'";
$results = mysqli_query($con, $prep);
$jsonData = array();
while ($row = $results->fetch_row()) {
$jsonData[] = $row;
}
echo json_encode($jsonData);
}
?>