Latest Update: I have successfully connected to a MySQL database, retrieved information, and encoded it in JSON format.
<?php
$mysqli_db_hostname = "localhost";
$mysqli_db_user = "root";
$mysqli_db_password = "password";
$mysqli_db_database = "database";
$con = @mysqli_connect($mysqli_db_hostname, $mysqli_db_user, $mysqli_db_password,
$mysqli_db_database);
if (!$con) {
trigger_error('Could not connect to MySQL: ' . mysqli_connect_error());
}
$var = array();
$sql = "SELECT * FROM uploads";
$result = mysqli_query($con, $sql);
while($obj = mysqli_fetch_object($result)) {
$var[] = $obj;
}
echo '{"uploads":'.json_encode($var).'}';
?>
In the HTML code snippet below, you can see that height, brand, and model are displayed in a single row.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#jsondata tr').mouseover(function(){
var row = $(this).prop('id');
$('#jsondata'+row).show();
}).mouseleave(function(){
var row = $(this).prop('id');
$('#jsondata'+row).hide();
});
</script>
<table class="mGrid" id="jsondata">
<thead>
<th>height</th>
<th>brand</th>
<th>model</th>
</thead>
<tbody></tbody>
</table>
<div id="result">
<table class="mGrid" id="specific1">
<thead>
<th>email</th>
<th>height</th>
<th>location</th>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
var url="data_retrieval.php";
$("#jsondata tbody").html("");
$.getJSON(url,function(data){
$.each(data.uploads, function(i,user){
var newRow =
"<tr>"
+"<td>"+user.height+"</td>"
+"<td>"+user.brand+"</td>"
+"<td>"+user.model+"</td>"
+"</tr>" ;
$(newRow).appendTo("#jsondata tbody");
});
$.each(data.uploads, function(i,user){
var newdiv =
'<table id="specific'+i+'"><tr><td>'+user.email+'</td><td>'+user.height+'</td><td>'+user.location+'</td></tr></table>';
$(newdiv).appendTo("#result"); // Should be an DIV....
});
});
});
</script>
I am looking for a way to fetch the height, brand, and model data separately without affecting the retrieval of other information. Any suggestions on how to achieve this would be greatly appreciated. Thank you.