Option list showing undefined values on ajax output - php

Question

this is my code to show values in list box.
$.ajax({
type: "POST",
data: queryvalue,
url: "inputaction.php",
success: function (data) {
switch (action) {
case "GetMake":
console.log(data);
var select = $("#promake");
select.empty();
for (var i = 0; i < data.length; i++)
{
select.append('<option value="' + data[i].id + '">' + data[i].make + '</option>');
}
break;
}
}
});
i get the result of lot of undefined values in select field. and i have attached an console result in image file, in console output is correct how to rectify this problem.
Console Output
Page Output
$type = mysqli_real_escape_string($conn, $_POST['type']);
$make = mysqli_real_escape_string($conn, $_POST['make']);
$query = "select * from assetmodel where typeid = '".$type."' AND makeid = '".$make."' ORDER by model ASC";
$result = RunQuery($query, $conn);
while($row = mysqli_fetch_array($result)){
$re = array(
'id' => $row['id'],
'model' => $row['model']
);
}
echo json_encode($re);
this is my action page

Answer 1

You have to use "JSON.parse":
var select = $("#promake");
select.empty();
var parse = JSON.parse(json);
for (var i = 0; i < parse.length; i++)
{
select.append('<option value="' + parse[i].id + '">' + parse[i].make + '</option>');
}

Answer 2

decode the json in success
success: function (data) {
var data = $.parseJSON(data);
switch (action) {
case "GetMake":
console.log(data);
var select = $("#promake");
select.empty();
for (var i = 0; i < data.length; i++)
{
select.append('<option value="' + data[i].id + '">' + data[i].make + '</option>');
}
break;
}
}

Answer 3

You have to specify the dataType as json
$.ajax({
type: "POST",
data: queryvalue,
url: "inputaction.php",
dataType: "json",
success: function (data) {
switch (action) {
and set the MIME type of your response to application/json before sending the data:
header('Content-Type: application/json');
echo json_encode($re);

Answer 4

Simple fix in client-side is as below. Just a condition check inside your loop.
for (var i = 0; i < data.length; i++)
{
if (typeof data[i].id != "undefined" && typeof data[i].make != "undefined" ) {
select.append('<option value="' + data[i].id + '">' + data[i].make + '</option>');
}
}
If you want to have clean data from DB itself, you have to repair your query. That will eliminate the root cause.