Ahora estoy usando la función JavaScript codificada de la siguiente manera:
self.fillSelect = function (key) { html = "<option value =''>choose</option>"; self.getGroupOptions(key, function (res) { for (let a = 0; a < res.length; a++) { html += "<option value = '" + res[a].Code_Name + "'>" + res[a].Code_Name + "</option>"; } }, function (err) { }); return html; }Como sé o entiendo, la variable html es una variable global y se puede acceder a ella desde cualquier lugar de la función. En esta función, esta lógica ocurre después de la declaración de devolución. Esta función simplemente devuelve
<option value =''>choose</option>luego ingresa al bucle sin resultado... ¿por qué sucede eso?
self.getGroupOptions()Esta función es una solicitud jQuery AJAX para obtener opciones de la base de datos
Debe aprender acerca de las funciones asincrónicas de javascript y las devoluciones de llamada. El bucle for que llena el html está dentro de una función que se llama más tarde, de forma asíncrona.
JavaScript tiene un solo subproceso, lo que significa que hay una sola línea de ejecución y las cosas no pueden suceder "al mismo tiempo" en dos lugares de un software JS, ya sea una página o una aplicación JS de nodo.
Para evitar esta "característica", en JS es muy común ejecutar operaciones asíncronas que proporcionan una devolución de llamada.
El sistema subyacente (en este caso, el navegador) realizará la operación (en este caso, una llamada AJAX) y luego "devolverá la llamada" a su código invocando una función proporcionada.
Esto es lo que sucede en este caso, la llamada a AJAX ocurre más tarde, su código regresa antes.
Luego, cuando ocurre la llamada AJAX, su llamada se llama como parte de la "devolución de llamada", se ejecuta el ciclo for, la variable html se llena, pero en ese momento es demasiado tarde para devolverla.
Debe devolver una Promesa y registrar una devolución de llamada en esa promesa para poder recuperar el contenido html más tarde, cuando se completen todas las cosas de AJAX y la devolución de llamada.