Reputation: 49
I have a problem creating dynamic tables for my project. With AJAX, I get data from PHP and JSON converts the array into a table but the dump doesn't work.
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
if ($row["Author"] !== "" && $row["Name"])
{
$table_data = array(
"Author" => "".$row["Author"]."",
"Name" => "".$row["Name"]."",
"Text" => "".$row["Text"].""
);
array_push($filtr, json_encode($table_data));
echo "".json_encode($table_data)."";
}
}
}
$.post("../include/filtr_callback.php", { sel_id: "" + knih_callback + "" }, function(data, status) {
//var mydata = JSON.parse(data);
var mydata = JSON.parse(JSON.stringify(data));
mydata = "[ " + mydata + " ];"
console.log(mydata);
var tbl = $("<table/>").attr("id", "table-data");
$("#tabulka").append(tbl);
for (var i = 0; i < mydata.length; i++) {
var tr = "<tr>";
var td1 = "<td>" + mydata[i]["Author"] + "</td>";
var td2 = "<td>" + mydata[i]["Name"] + "</td>";
var td3 = "<td>" + mydata[i]["Name"] + "</td>";
var td4 = "<td>" + mydata[i]["Text"] + "</td></tr>";
$("#table-data").append(tr + td1 + td2 + td3 + td4);
}
});
Upvotes: 0
Views: 71
Reputation: 4423
You need to echo the result after you finish iteration of the loop. So I have created a secondary array
called $table
where I store results after each iteration.
$table = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
if($row["Author"] !== "" && $row["Name"]){
$table_data = array(
"Author" => "".$row["Author"]."",
"Name" => "".$row["Name"]."",
"Text" => "".$row["Text"].""
);
array_push($filtr,json_encode($table_data));
$table[] = $table_data;
}
}
echo json_encode($table);
}
I have also made some small changes in your javascript code. You don't need to call anymore JSON.stringify
on your response and also mydata
is array itself after JSON.parse
so I also removed mydata = "[ " + mydata + " ];"
.
$.post("../include/filtr_callback.php", { sel_id: "" + knih_callback + "" }, function(data, status) {
var mydata = JSON.parse(data);
console.log(mydata);
var tbl = $("<table/>").attr("id", "table-data");
$("#tabulka").append(tbl);
for (var i = 0; i < mydata.length; i++) {
var tr = "<tr>";
var td1 = "<td>" + mydata[i]["Author"] + "</td>";
var td2 = "<td>" + mydata[i]["Name"] + "</td>";
var td3 = "<td>" + mydata[i]["Name"] + "</td>";
var td4 = "<td>" + mydata[i]["Text"] + "</td></tr>";
$("#table-data").append(tr + td1 + td2 + td3 + td4);
}
});
Upvotes: 1