Popular second select after selecting the first select

Question

good night!

I want to popular the second select with the data depending on the first select, I have the following code

View

$(document).ready(function(){
   $("#relatorio").change(function(){
      $.ajax({
         type: "POST",
         url: "carregaDados",
         data: {relatorio: $("#relatorio").val()},
         dataType: "json",
         success: function(json){
            console.log(json);
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#filtro").html(options);
         }
      });
   });
});

---

<div class="form-group">
                                            <label class="col-md-3 control-label">Relatório</label>
                                            <div class="col-md-9">                                                                                            
                                                <select class="form-control" name="relatorio" id="relatorio">
                                                    <option value="0">Escolha um relatório</option>
                                                    <option value="chamadosCliente">Chamados por cliente</option>
                                                    <option value="chamadosTecnico">Chamados por Tecnico</option>
                                                </select>
                                            </div>
                                        </div>

                                       <div class="form-group">
                                            <label class="col-md-3 control-label" for="filtro">Filtro</label>
                                            <div class="col-md-9">                                                                                            
                                                <select class="form-control" name="filtro" id="filtro">

                                                </select>
                                            </div>
                                        </div>

Controller

public function carregaDados(){

        $this->load->model('clientes_model');
        $clientes = $this->clientes_model->buscaNomeCliente();
        echo json_encode($clientes);
}

Model

public function buscaNomeCliente(){
        $this->db->select('id, razaoSocial');
        $query = $this->db->get('clientes');
        return $query->result();
    }

But when it returns the data pro ajax in the View, it returns like this:

Array [ Object, Object ]

It doesn’t return the data as it has to be, someone can help me?

Thank you!

Answer 1

I noticed who in your controller you return the data through the line json_encode($clientes);

This causes you to return an object with its JSON representation. So, in the successful response of your AJAX, you need to convert it back in order to be able to interpret your object.

For this to happen, you must include the following line within your AJAX callback:

json = JSON.stringify(json);

Now, your object is converted to the JSON String type.

Documentation:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

http://php.net/manual/en/function.json-encode.php