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.