Populate dropdown with JSON data using jquery & ajax

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>'))
          }
         )
    })