Use ajax to get json data from a php file - php

Question

Right Im using php to generate a json file
<?PHP
header('Content-type: application/json');
include 'includes/db/connect.php';
$category = $_REQUEST['catname'];
$sql = "SELECT `CDID`, `CDTitle`, `CDYear`, `pubID`, `CDPrice` FROM `tiptop_cd` INNER JOIN tiptop_category ON tiptop_cd.catID=tiptop_category.catID WHERE catDesc = '{$category}'";
$result = mysqli_query($con,$sql);
$row = mysqli_fetch_array($result);
while($row = mysqli_fetch_array($result)){
$returned[] = $row;
}
echo json_encode($returned);
?>
and I want my php page to use a select box that gets the categories from the database
<?php
$result = mysqli_query($con,"SELECT * FROM tiptop_category");
// echo "<table>";
echo "<select id=\"catname\">";
while($row = mysqli_fetch_array($result))
{
?>
<option name="<?=$row['catDesc']?>"><?=$row['catDesc']?></option>
<?php
}
echo "</select>";
?>
now im trying to use this ajax to output my data
<script type="text/javascript">
var catname = "Classical";
$.ajax({
type: "GET",
url: "./json.php?catname=" + catname,
accepts: "json",
dataType: "json",
success: function(data, status, jqXHR){
someFunction(data);
},
error: function(jqXHR, status, HTTPerror){
alert(HTTPerror);
}
});
function someFunction(data){
console.log(data);
var list = "<ul>";
for (var i = 0; i < data.length; i++) {
list += "<li><ul>";
for (var j = 0; j < data[i].length; j++) {
list += "<li>" + data[i][j] + "</li>";
};
list += "</ul></li>";
};
list += "</ul>";
$('#wrapper').append(list);
}
</script>
<div id="wrapper">
</div>
but all i get is an empty bulleted list

Answer 1

From how the db query looks like, you should get a list of associative arrays, which are encoded as objects:
var list = "<ul>";
for (var i = 0; i < data.length; i++) {
list += "<li><ul>";
for(var key in data[i])
if(data[i].hasOwnProperty(key))
list += "<li>" + data[i][key] + "</li>";
list += "</ul></li>";
};
list += "</ul>";