en esta ocasión traigo una duda o inconveniente que he tenido para renderizar una data en un select, esta data me llega como resultado de una petición ajax al controlador sin embargo al hacer un console.log me muestra un array de objetos y los atributos pero a su vez me muestra un error y nunca me carga la data en los options del select.
El error en consola es:
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
Pare este ejemplo la petición me retorna 7 registros, estos se muestran con un console.log sin problema (es decir, si llega la información)
El código es:
<script>
$(document).ready(function() {
$("#id").change(function() {
let id = $(this).val();
let token = $("meta[name='csrf-token']").attr("content");
console.log('Id: '+id);
$.ajax({
type: "GET",
url: `clients/${id}`,
data: {
id: id,
_token: token,
},
/* si la respuesta es correcta, trajo un dato sin errores, */
success: function(response) {
if (response.length) {
$("#id_client").find('option').remove();
select = document.getElementById("id_client");
response.forEach((data) => {
option = document.createElement("option");
option.value = data.id;
option.text = data.name;
select.appendChild(option);
console.log(data.name + ' - ' + data.id);
});
}
}
});
});
});
</script>
Mi Select es de selección múltiple:
<div class="form-group col-md-12">
<label for="id_client"><b>Cliente</b></label>
<select title="Seleccione clientes" class="selectpicker form-control" data-live-search="true" id="id_client" name="id_client[]" multiple="multiple">
</select>
</div>
Agradezco de antemano sus aportes y experiencia.