1

Estoy tratando de incrustar datos que me muestran en JSON desde una REST API mediante AJAX Y JQUERY, desde el siguiente select que por ende estoy usando Materialize.css

<div class="input-field col s12 m4">
    <select>

    </select>
    <label>Seleccionar Región</label>
</div>

Lo que muestra el varlo de "res"en la parte de "success" es la matriz de objetos que me retorna la url con el nombre de regiones:

{
  regiones: [
    {
        "_id" : ObjectId("5e3733d6e3091231ac95f73d"),
        "nombre" : "Región 1 ",
        "__v" : 0
    }
    {
            "_id" : ObjectId("5e3733e4e3091231ac95f73e"),
            "nombre" : "Región Centro 2",
            "__v" : 0
    }
    {
            "_id" : ObjectId("5e3733f6e3091231ac95f73f"),
            "nombre" : "Región 3",
            "__v" : 0
    }
  ]
}

hasta aqui creo que estoy haciendo en lo correcto porque muestro los datos en un console.log() y normal puedo apreciar esa matriz e incluso cuando lo inserto a una tabla. El detalle es que Estoy haciendo el siguiente método con AJAX:

function cargarRegiones(){
        $.ajax({
            type: 'GET',
            url: '/api/region/mostrarRegiones',
            success: function(res){
                let select = $('select')
                select.html('')
                let obj = res

                obj.regiones.forEach((elemento, indice) => {
                    select.append(`
                        <option value="${indice}">${elemento.nombre}</option>
                    `)
                });

            },
            error: function(res){
                let error = res.responseJSON.mensaje
                console.log(error)
            }
        })
    } 

Pero practicamente solo me muestra el primer objeto mas no los demas objetos en la etiqueta "" Por favor si alguien me pueda explicar que estoy haciendo mal. o quizá esté aplicando mal en la parte del foreach O derepente es porque estoy usando Materialize.css el inconveniente.

2
  • ¿Podrías imprimir un ejemplo de la respuesta contenida en res?, sería de utilidad para saber si es un problema de iteración o de logica como tal, saludos!
    – Nalius
    Commented el 3 feb. 2020 a las 0:44
  • @Nalius la respuesta contenida en res es el arreglo con el nombre regiones que muestro arriba, pero solo al tratar de crear las opciones en el select me muestra el primero y no me salen los demas, hasta pienso que es un defecto de materialize.css o algo asi
    – Romero
    Commented el 3 feb. 2020 a las 0:59

2 respuestas 2

1

El problema es que estás insertando datos dinámicamente y estás inicializando el plugin antes de tener los datos. Intenta insertando esta línea después de agregar los datos al select $('select').formSelect(); introducir la descripción de la imagen aquí

1

probaste luego de añadir las etiquetas option ejecutar un trigger change? te paso el código:

function cargarRegiones(){
    $.ajax({
        type: 'GET',
        url: '/api/region/mostrarRegiones',
        success: function(res){
            let select = $('select')
            select.html('')
            let obj = res

            obj.regiones.forEach((elemento, indice) => {
                select.append(`
                    <option value="${indice}">${elemento.nombre}</option>
                `)

            });
            $('select').trigger('change');
        },
        error: function(res){
            let error = res.responseJSON.mensaje
            console.log(error)
        }
    })
} 
2
  • no me funciona, nisiquiera me muestra el efecto del select que usa materialize cuando hago click al seleccionar solo me muestra el primer elemento como si fuera un input o como si mostraria un elemento en un div
    – Romero
    Commented el 3 feb. 2020 a las 1:17
  • No lo tenes online como para verlo? tiene que ser una pavada. hace poco estuve con lo mismo Commented el 3 feb. 2020 a las 1:18

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.