0

necesito crear dinámicamente un input para listar todos los municipios de un determinado estado de México, tengo mi consulta correctamente y desde php estoy regresando el array de la siguiente manera.

    $idestado = (int)$_POST['idestado'];
    $municipios = new municipiosController();
    $listmunicipios = $municipios->getMunicipioEstado($idestado);
    echo json_encode($listmunicipios);

Desde ajax recibo este array y estoy haciendo un foreach para comprobar la información recibida y se supone que "según" la información de la consola todo está bien aunque noto que el array tiene información duplicada no entiendo por que, comparto captura: introducir la descripción de la imagen aquí

Este es mi ajax:

        $.ajax({
        url:"views/ajax.php",
        method:"POST",
        dataType: 'JSON',
        data:datos,
        cache:false,
        contentType:false,
        processData:false,
        success: function(regreso){
            Object.keys( regreso ).forEach(function( key ) {
                console.log('key name: ', key);
                console.log('value: ', regreso[key]);
            });
        }
    });

La pregunta es: De ese array que recibo necesito generar en html las opciones e insertarlas en el select.

<div class="row">
 <div class="col-md-6">
   <label>Municipio:</label>
     <select class="selectpicker" id="selecmunicipio" name="selecmunicipio" data-live-search="true" title="Selecciona tu municipio" required>

    </select>

</div>

El HTML que necesito generar es algo así:

<option  value="123">Nombre de la localidad1</option>

Para quedar finalmente algo así:

<div class="row">
 <div class="col-md-6">
   <label>Municipio:</label>
     <select class="selectpicker" id="selecmunicipio" name="selecmunicipio" data-live-search="true" title="Selecciona tu municipio" required>
        <option  value="123">Nombre de la localidad1</option>
        <option  value="13423">Nombre de la localidad2</option> 
        <option  value="123223">Nombre de la localidad3</option>                
    </select>

</div>

6
  • 1
    Puedes poner algo así en el success de Ajax: success: function(regreso){ $.each(regreso, function(k, v) {$('#selecmunicipio').append('<option value="' + v.id + '">' + v.nombre + '</option>');});});. Para los datos duplicados, tendrás que ver lo que está devolviendo tu petición en PHP.
    – A. Cedano
    Commented el 10 ene. 2018 a las 1:36
  • He cambiado mi php a esto: Commented el 10 ene. 2018 a las 1:56
  • He cambiado mi php a esto: var_dump($listmunicipios); que es la variable que obtiene el fetchAll de la consulta. En el js estoy imprimiendo lo que recibe y tengo este resultado. image.prntscr.com/image/hRr8yd9hQN6dMhwvAMu9cA.png empiezo a crear que es mi foreach el que estaba mal, probaré lo que me dices y te comento. Commented el 10 ene. 2018 a las 2:04
  • Desafortunadamente me fue mal :( image.prntscr.com/image/H1hh74JCRSeGsH_o5Q-DgQ.png image.prntscr.com/image/rH0EDzzZR6usUMV78dV0RQ.png Commented el 10 ene. 2018 a las 2:07
  • 1
    Por lo que se ve en la imagen el fetchAll te está devolviendo un array JSON, no un objeto JSON, por lo tanto, deberás acceder a la clave 0 de array para poder leerlo: $.each(regreso[0], function(k,v)... todo lo demás lo dejas igual, como en el comentario de más arriba.
    – A. Cedano
    Commented el 10 ene. 2018 a las 10:04

1 respuesta 1

1

deberias iterar los datos seleccionar segun el criterio y luego hacer un append al combo te doy un ejemplo : donde list es el conjunto de datos.

var combo = $('cboMicombo');
    $.each(list, function (obj, item) {    
    if(item.ciudadID== 3) {
            combo.append('<option value="' + item.Id + '">' + item.nombre + '</option>');
    }});

para ver la duplicidad de los datos deberias mostrar el codigo del lado servidor asi poder ayudarte con eso.

7
  • He cambiado mi php a esto: var_dump($listmunicipios); que es la variable que obtiene el fetchAll de la consulta. En el js estoy imprimiendo lo que recibe y tengo este resultado. image.prntscr.com/image/hRr8yd9hQN6dMhwvAMu9cA.png empiezo a creer que es mi foreach el que estaba mal. Commented el 10 ene. 2018 a las 3:18
  • Aún así, utilizo tu código pero me marca un error: image.prntscr.com/image/16SS1b0WQN2zOn626aVslA.png Commented el 10 ene. 2018 a las 3:22
  • reemplaza list por tu variable que aparentemente es "regreso". Commented el 10 ene. 2018 a las 11:23
  • Daniel, gracias por tu respuesta, verás, he realizado el cambio que me dices y al parecer el asunto se resolvió, solo una duda adicional. Al abrir el select desde el sitio aparece vacío, pero viendo el código me doy cuenta que las opciones si están actualizadas. ¿Tengo que refrescar el combo o algo asi? :( te comparto una captura. image.prntscr.com/image/TMilxdENS2_bihgq5g7cuw.png Commented el 10 ene. 2018 a las 22:03
  • 1
    prueba hacer la carga de datos luego de finalizada la carga de la pagina, generalmente la llamada a la funcion deberia ir:$(document).ready( function () { tuFuncion(); }); Commented el 14 ene. 2018 a las 15:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.