How to stop the work ‘Array’ from being part of the output?? It appears between the headers and the data rows, and I can’t get rid of it. Is my HTML wrong for dynamic table rendering?? I would embed a picture but I’m not allowed yet to do that
UserID First Name Last Name E-mail Phone Action
`Array`
9 Lenny Kravits [email protected] (234) 231-9999
8 Sally Simpson [email protected] (425) 455-5678
7 Chad Merit [email protected] 4251119988
6 Janet Miller [email protected] 4251119988
5 Tom Smith [email protected] (425) 826-3344
4 James Miller [email protected] (425) 471-8101
3 Ron Weasly [email protected] (111) 222-3344
2 Harry Potter [email protected] (789) 654-135
1 Sahil Kumar [email protected] (078) 965-1235
This is the getusers.php file that the Javasript calls as async/await/fetch.
<?php include_once 'init.php';
error_reporting(1);
$stmt = $pdo->prepare("CALL getUsers()");
$stmt->execute();
do {
$data = $stmt->fetchAll();
} while ($stmt->nextRowset() && $stmt->columnCount());
foreach ($data as $row) {
$data .= '
<tr>
<td>' . $row['userId'] . '</td>
<td>' . $row['fName'] . '</td>
<td>' . $row['lName'] . '</td>
<td>' . $row['email'] . '</td>
<td>' . $row['phone'] . '</td>
<td>
<a href="#" id="' . $row['userId'] . '" class="btn btn-success btn-sm
rounded-pill py-0 editLink" data-bs-toggle="modal" data-bs-
target="#editUserModal">Edit</a>
<a href="#" id="' . $row['userId'] . '" class="btn btn-danger btn-sm
rounded-pill py-0 deleteLink">Delete</a>
</td>
</tr>
';
}
echo $data;
?>
This is the user.php file with embedded Javascript in the same page (for now). This is the first time using the fetch api, with async/await. Everything renders, but the ‘array’ word appears as part of the ‘response’…and I’ve never had this issue before? For clarity I’m called a mysql stored procedure, very simple select * query…it works fine and the data renders.Using ‘document.querySelector(“table”)…maybe I have to dynamically render the whole table…which doesn’t yet work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-icons.css" rel="stylesheet">
<link href="css/fullcalendar.min.css" rel="stylesheet">
<title>Comments</title>
</head>
<body>
<div class="container">
<div class="row mt-4">
<div class="col-lg-12 d-flex justify-content-between align-items-center">
<div>
<h4 class="text-primary">All users in the database!</h4>
</div>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-
target="#addNewUserModal">Add New User</button>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-12">
<div id="showAlert"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-striped table-bordered text-center">
<thead>
<tr>
<th>UserID</th>
<th>First Name</th>
<th>Last Name</th>
<th>E-mail</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!--Filled by AJAX-->
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
const tbody = document.querySelector("tbody");
// Fetch All Users Ajax Request
const fetchAllUsers = async () => {
const data = await fetch("includes/getusers.php", {
method: "GET",
});
const response = await data.text();
tbody.innerHTML = response;
console.log(response);
};
fetchAllUsers();
</script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>