Soy nuevo en AJAX / JSON, y estoy luchando para analizar una respuesta de matriz AJAX en un menú desplegable <select>
.
Mi resultado se ve bien, pero a pesar de que investigué bastantes tutoriales en línea y probé varias formas de devolver el resultado, cada uno de ellos da como resultado que las options
del menú desplegable se muestren como undefined
.
resultado AJAX
[{"property_code":"AGGCO","name":"Office Name"}]
Nota: puede haber hasta 100 entradas en la matriz.
jQuery
$('#unit').on('change', function() { var unitID = $(this).val(); if (unitID) { $.ajax({ type: 'POST', url: '../../controllers/admin_addNewUser_units_offices.php', data: 'action=unit_office_dropdown&unit_id=' + unitID, success: function(response) { console.log(response); var len = response.length; $("#office").empty(); for (var i = 0; i < len; i++) { var code = response[i]['property_code']; var name = response[i]['name']; $("#office").append("<option value='" + code + "'>" + name + "</option>"); } } }); } else { $('#office').html('<option value="">Select Business Unit first</option>'); } });
¿Alguien podría explicar qué estoy haciendo mal, por favor? Gracias
Su código parece razonable, suponiendo que analice el JSON
se puede simplificar
NOTA: Si desea "Por favor, seleccione", puede usar .html()
que también vaciará la selección. Si no vacía, la próxima vez tendrá las nuevas opciones agregadas a las anteriores.
const response = `[{ "property_code": "AGGCO", "name": "Office Name"}]`; // for testing const opts = JSON.parse(response); // not needed if you deliver application/json $("#office") .html(new Option("Please select", "")) .append(opts .map(({ property_code, name }) => new Option(name, property_code)))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select id="office"></select>