如何使用javascript对json类型数据进行排序？

Question

I have 3 dropdowns with list of places that I wanted to sort in ascending order. The first dropdown of places is sorted using codeigniter active record order_by function and the places were successfully sorted in ascending order.However,using onchange javascript function,when I choose a place in the first dropdown then populate the second dropdown of places excluding the place I have chosen in the first dropdown, the places returned were not sorted in ascending order even though there is order_by function I have in my query. I suspect that this is because of the json formatted data returned in onchange. Here are my codes. Thanks for the help.

This code sorts the data properly in ascending order

function get_dropdown_barangay(){

  $query = $this->db->select('ID,brgy_name')
                    ->from('tbl_barangay')
                    ->order_by('brgy_name','asc')
                    ->get()
                    ->result_array();
  $dropdown = array('0'=>'Select Barangay');
  foreach($query as $value){
    $dropdown[$value['ID']] = $value['brgy_name'];
  }

  return $dropdown;

}

Output Image:

Onchange code, the returned places are not sorted in ascending order

$('#brgy_id_1').change(function(){

    var brgy_id = $("#brgy_id_1").val();
    alert(brgy_id);
    var data_val = {'brgy_id':brgy_id};

    $.ajax({
         type: "POST",
         url:"<?php echo base_url();?>admin/get_barangay_list",
         data:data_val,
         dataType:'json',
         success: function(data)
          {
           $('#brgy_id_2').empty();
           $.each(data,function(id,val)
           {
                var opt = $('<option />'); // here we're creating a new select option for each group
                  opt.val(id);
                  opt.text(val);
                  $('#brgy_id_2').append(opt);
            });
           }
     });

 }); //end change

admin.php

function get_barangay_list(){

      if(isset($_POST['brgy_id2'])){
        $brgy_array_id = array('0'=>$_POST['brgy_id'],'1'=>$_POST['brgy_id2']);
      } else{
        $brgy_array_id = array('0'=>$_POST['brgy_id']);
      }

      $result=$this->core_model->get_barangay_list($brgy_array_id);
      $this->output->set_header('Content-Type: application/json',true);
      echo json_encode($result);
    }

model.php

function get_barangay_list($brgy_array_id){

  $query = $this->db->select('ID,brgy_name')
                    ->from('tbl_barangay')
                    ->where_not_in('ID',$brgy_array_id)
                    ->order_by('brgy_name','asc')
                    ->get()
                    ->result_array();
  $dropdown = array('0'=>'Select Barangay');
  foreach($query as $value){
    $dropdown[$value['ID']] = $value['brgy_name'];
  }

  return $dropdown;

}

Output Image showing data are not sorted in ascending order

Answer 1

One way to implement kinghfb's comment :

On the server side : build an array

$dropdown = array();
$dropdown[] = array('id' => 0, 'label' => 'Select city');
for ($query as $value) {
    $dropdown[] = array('id' => $value['ID'], 'label' => $value['brgy_name']);
}

On the client side (javascript) : change your loop code :

$.each(data,function(id,val) {
    var opt = $('<option />'); // here we're creating a new select option for each group
    opt.val(val.id);
    opt.text(val.label);
    $('#brgy_id_2').append(opt);
});