handling multiple db rows with ajax and json - php

Question

I have a mysql database, I am using ajax to query it via php, it works fine when only a single row is returned it errors out with this when multiple rows are returned.
"xhr=[object Object]
textStatus=parsererror
errorThrown= SyntaxError: Unexpected token { in JSON at position 221"
Here is the code I am using, any help would be much appreciated.
$('button').click(function(){
event.preventDefault();
var box = document.getElementById('machine');
var rdata;
var id= box.options[box.selectedIndex].text;
$.ajax({
url: 'machine_report.php',
data: 'machine=' + id,
dataType: 'json',
success: function(rdata)
{
var uid = rdata[0];
var date = rdata[1];
var time = rdata[2];
var machine =rdata[3];
var reps = rdata[4];
var sets = rdata[5];
var weight = rdata[6];
var settings = rdata[7];
$('#status').html("<b>id: </b>"+uid+"<b> date: </b>"+date + "<b> Machine: </b>" + machine + "<b> reps: </b>" + reps + "<b> sets: </b>" +
sets + "<b> weight: </b>" + weight + "<b> settings: </b>" + settings);
},
error: function(xhr,textStatus, errorThrown) {
$("#status").html("xhr=" + xhr + "textStatus=" + textStatus + "errorThrown= " + errorThrown);
}
});
});
PHP Code
<?php
require_once("connect.php");
$machine = $_GET['machine'];
$mysql="SELECT * FROM workouts WHERE machine LIKE '$machine' ORDER BY uid DESC";
$result=mysqli_query($con,$mysql);
if (!$result) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
$rowCount = mysqli_affected_rows($con);
while($row = mysqli_fetch_array($result)){
$date = $row['date'];
$time = $row['time'];
$machine = $row['machine'];
$reps = $row['reps'];
$sets = $row['sets'];
$weight = $row['weight'];
$settings = $row['settings'];
echo json_encode($row);
}
?>

Answer 1

Your PHP code is outputting one term at time so it will give response in following way.
{name:"abc",age:21}{name:"pqr",age:12}
which is not an valid json if you are passing multiple JSON Objects then you have to create collection of it.(which is simply a array of objects) The valid json for above json will be
[{name:"abc",age:21}{name:"pqr",age:12}]
You can produce this by first catching all the database rows into one array and then pass this array to json_encode
while($row=mysqli_fetch($result)
$rows[] = $row;
echo json_encode($rows);
All the above stuff is to do at the server side.
Now let's look at the client side.
Your Javascript code look fine except for success function because it is written for handling only one object.
Server response returns the data as array of json objects so first you have to iterate the array and then write a code for single object something like this
success:function(data) {
for(var i in data) {
var Row = data[i] // it will contain your single object
//console.log function is used for debugging purpose only you can find more about it by googling.
console.log(Row.name) // you can access it's member like this
// do other stuff such as dom manipulation.
}
}
NOTE: you can also use JQuery's $.each to traverse an array.