Printing JSON (from a php) through ajax to a bootstrap modal - php

Question

Now this one seems a little complicated and maybe I have got myself into more than I can manage but it seems the only way I can achieve what I need.
I am a complete novice and am going at this blindly for a project I'm working on (this is the most complicated thing in the whole project) so any help would be much appreciated!
I basically have a bootstrap webpage, this webpage displays a users list (from php in a while loop). What I need the user to be able to do is select a user from this and edit the details in a form in a bootstrap modal.
So far I have everything working, modal loading etc and from various sources online have wrangled JSon but I've never learnt it and am way out of my depths. Currently it is printing '[object HTMLCollection]' in each field.
Firstly here is the HTML for the modal & list:
Modal (This comes up perfectly)
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="editModalLabel"></h2>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" name="username" class="form-control" id="username"></input>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<div class="input-group">
<span class="input-group-btn">
<input type="button" class="form-control" value="Change Password" onClick="changeRandomPassword();">
</span>
<input type="text" name="password" class="form-control" id="password" value="" required></input>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="firstName" class="control-label">First Name:</label>
<input type="text" name="firstName" class="form-control" id="firstName">
</div>
<div class="form-group">
<label for="lastName" class="control-label">Surname:</label>
<input type="text" name="lastName" class="form-control" id="lastName">
</div>
<div class="form-group">
<label for="jobTitle" class="control-label">Job Title:</label>
<input type="text" name="jobTitle" class="form-control" id="jobTitle">
</div>
<div class="form-group">
<label for="TaskTeam" class="control-label">Task Team:</label>
<input type="text" name="TaskTeam" class="form-control" id="TaskTeam">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Submit Changes</button>
</div>
</div>
</div>
</div>
Here is the php list: (again no trouble here)
<?php
include("dbconnect.php");
$dbQuery= mysql_query("SELECT * FROM users ORDER BY lastName ASC;");
while($dbRow = mysql_fetch_array($dbQuery))
{
$userID = $dbRow['id'];
$username = $dbRow['username'];
$firstName = $dbRow['firstName'];
$lastName = $dbRow['lastName'];
$jobTitle = $dbRow['jobTitle'];
$userteam = $dbRow['TaskTeam'];
$admin = $dbRow['admin'];
echo '<tr>';
echo '<td>';
echo '<button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModal" value='.$userID.' id="user" name="user"" data-user='.$userID.'><span title="Edit" aria-hidden="true" class="glyphicon glyphicon-edit"></span></button>';
echo '</td>';
echo '<td>'.$firstName.'</td>';
echo '<td>'.$lastName.'</td>';
echo '<td>'.$jobTitle.'</td>';
echo '<td>'.$userteam.'</td>';
echo '<td>'.$admin.'</td>';
echo '<td>';
echo '<a href="deleteUser.php?id='.$userID.'">';
echo '<button type="button" name="delete_row" id="delete_row" class="close">';
echo '<span title="Delete" aria-hidden="true" class="glyphicon glyphicon-trash">';
echo '</span>';
echo '<span class="sr-only">';
echo 'Delete';
echo '</span>';
echo '</button>';
echo '</a>';
echo '</td>';
echo '</tr>';
}
echo mysql_error();
mysql_close();
?>
Here is where the problem must lay:
<script>
$('#editUserModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget)
var recipient = button.data('user')
var modal = $(this)
modal.find('.modal-title').text('Edit ' + recipient + "'s details.")
$(function ()
{
$.ajax(
{
type: 'GET',
url: "getUser.php?id=",
data: 'recipient',
dataType: "json",
success: function(data)
{
var obj = JSON.parse(data);
$.each(obj, function(key, val)
{
console.log(val);
var id = data[0];
var firstName = data[1];
var lastName = data[2];
var username = data[3];
var password = data[4];
var jobTitle = data[5];
var TaskTeam = data[6];
var admin = data[12];
});
}
})
})
modal.find('.modal-body #firstName').val(firstName)
modal.find('.modal-body #lastName').val(lastName)
modal.find('.modal-body #username').val(username)
modal.find('.modal-body #password').val(password)
modal.find('.modal-body #jobTitle').val(jobTitle)
modal.find('.modal-body #TaskTeam').val(TaskTeam)
})
</script>
Lastly here is php file to get the user details: (This works too but only is done manually- This is the bulk of it excluding passwords etc)
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$userid = intval($_GET['id']);
$sql="SELECT * FROM users WHERE id = $userid";
$result = $conn->query($sql);
/*
$user = array();
while ($row = mysql_fetch_array($result)) {
$details = array(
"username" => $row['username'],
"firstName" => $row['firstName'],
"lastName" => $row['lastName'],
"taskTeam" => $row['taskTeam']
);
$user[] = $details;
}
echo json_encode($user);
$conn->close();
*/
if ($result->num_rows > 0) {
// output data of each row
$array = array();
while($row = $result->fetch_assoc()) {
array_push($array, $row);
}
echo json_encode($array);
} else {
echo "0 results";
}
$conn->close();
Sorry for lack of Mysqli I know this is the latest standard and am currently implementing it in this project.
Any help would be great! Thanks

Answer 1

The problem with your code is here:
var obj = JSON.parse(data);
$.each(obj, function(key, val)
{
console.log(val);
var id = data[0];
var firstName = data[1];
var lastName = data[2];
var username = data[3];
var password = data[4];
var jobTitle = data[5];
var TaskTeam = data[6];
var admin = data[12];
});
You've already told your AJAX call that you are expecting JSON back from your PHP script. You did this with dataType: "json". So there is no reason to do this here: var obj = JSON.parse(data);. Since you told your AJAX call you are going to receive JSON back, it automatically parses it for you when the PHP script completes.
To access the data simply use the . syntax. For example, data.firstName
Also, you may need to need to change this line in your PHP file from
echo json_encode($array);
to
header('Content-Type: application/json');
echo json_encode($array);
Also, your PHP script needed some cleaning up:
<?php
include("dbconnect.php");
$dbQuery = mysql_query("SELECT * FROM users ORDER BY lastName ASC;");
while ($dbRow = mysql_fetch_array($dbQuery)) {
$userID = $dbRow['id'];
$username = $dbRow['username'];
$firstName = $dbRow['firstName'];
$lastName = $dbRow['lastName'];
$jobTitle = $dbRow['jobTitle'];
$userteam = $dbRow['TaskTeam'];
$admin = $dbRow['admin'];
echo '
<tr>
<td>
<button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModal" value='.$userID.' id="user" name="user"" data-user='.$userID.'><span title="Edit" aria-hidden="true" class="glyphicon glyphicon-edit"></span></button>
</td>
<td>'.$firstName.'</td>
<td>'.$lastName.'</td>
<td>'.$jobTitle.'</td>
<td>'.$userteam.'</td>
<td>'.$admin.'</td>
<td>
<a href="deleteUser.php?id='.$userID.'">
<button type="button" name="delete_row" id="delete_row" class="close">
<span title="Delete" aria-hidden="true" class="glyphicon glyphicon-trash"></span>
<span class="sr-only">Delete</span>
</button>
</a>
</td>
</tr>';
}
echo mysql_error();
mysql_close();
?>