Ajax call json undefined Object : object - php

Question

the json value keeps returning unidentified or it doesnt display at all
PHP CODE
$index=0;
while($row = $result->fetch_array()){
$index++;
$data=array(
array(
$index=>$row['menuName']
)
);
}
echo json_encode($data);
}
JQUERY AJAX
<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
data: {loadpage: 'table'},
dataType: 'json',
url: 'addtable.php',
success: function(data){
$('.navbar ul').append('<li>'+data[0]+'</li>');
}
}); //ajax request
});
</script>
The json is fine it displays in the right format. When i change my jquery to data[0] it displays object Object and if i do data[1 or higher] it gives me undefined. I dont know what im doing wrong i even tried it do this: data[0].1 and it displays nothing.
Any help will be appreciated.

Answer 1

First thing to do is to fix the PHP script part which responds to the request.
Create a valid JSON string response. The simpliest way is first to create a container (an array).
Then second is the to continually push fetched rows in there. Then finally use json_encode in the end.
Don't encode while inside the loop:
Simple example:
// initialize container
$data = array();
// the pushing of rows
while($row = $result->fetch_array()) {
$data[] = $row; // push the whole row
}
// finally, echo it to into a JSON string
echo json_encode($data);
// don't put me inside the WHILE
PHP Note: If this is mysqli, I'd suggest use the ->fetch_assoc() instead or just simply ->fetch_array(MYSQLI_ASSOC) flag.
In your AJAX script, just handle the response as you normally would:
<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
data: {loadpage: 'table'},
dataType: 'json',
url: 'addtable.php',
success: function(data){
// every each row, create an LI element with an anchor
$.each(data, function(index, element){
$('.navbar ul').append('<li>'+element.menuName+'</li>');
// just use the column names as the properties in your data response that came from PHP
});
}
});
});
</script>
If this runs, this should yield something into a markup like this:
<li>
Table1
</li>
<li>
Table2
</li>
<li>
Table4
</li>