Populate dropdown with JSON data using jquery & ajax - php

Question

I was able to succesfully get data from database in json format from controller, this is how it looks:
{
"dealer":[
["1","himanshu"],
["2","bhola the dealer"],
["3","bhola the dealer"]
]
}
the problem is that I am not able to pass json data into the dropdown list in view from the controller.
Model Code:
public function getName(){
$this->db->select('dealerid,dealername');
$query=$this->db->get('Dealer');
$result=$query->result_array();
//echo "<pre>";
return $result;
}
Controller Code:
public function dealer_list()
{
$list = $this->person->getName();
$ddata = array();
foreach ($list as $person) {
$row = array();
$row[] = $person['dealerid'];
$row[] = $person['dealername'];
$ddata[] = $row;
}
$output = array(
"dealer" => $ddata,
);
//output to json format
echo json_encode($output);
}
View Code:
//get a reference to the select element
$select = $('#select');
//request the JSON data and parse into the select element
$.ajax({
url: "<?php echo site_url('dealer_controller/dealer_list')?>"
, dataType: 'JSON'
, success: function (data) {
//clear the current content of the select
$select.html('');
//iterate over the data and append a select option
$.each(data.dealer, function (key, val) {
$select.append('<option id="' + val.id + '">' + val.name + '</option>');
})
}
, error: function () { <strong>
//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});

Answer 1

Your json output doesn't have the keys id or name for each dealer. Therefore val.id and val.name won't work.
In your Controller change:
$row[] = $person['dealerid'];
$row[] = $person['dealername'];
to:
$row["id"] = $person['dealerid'];
$row["name"] = $person['dealername'];
This adds the keys id and name to the php array, and when converted to json should output something like the following:
{"dealer":[{"id": "1", "name": "himanshu"}, {...}]}
These can then be retrieved in your $.each with val.id and val.name

Answer 2

Fiddle
$.each(data.dealer, function (index, item) {
$select.append(
$('<option>', {
value: item[0],
text: item[1]
}, '</option>'))
}
)
})