0

En mi archivo JS tengo el siguiente codigo...

 function get_estados_encuestas(this_, options, validador = null) {
        var buttonsPoll = '<div class="wizard-buttons">';
        $.get('home/get_estados', function(data) {

            $.each(data, function(index, item) {
                var selected = '';
                if (validador != null && validador === item['est_id']) {
                    selected = 'selected';
                }
                //$(selector).append(`<option value="${item['est_id']}" ${selected}>${item['est_nombre']}</option>`);
                buttonsPoll += `<a class="" role="button" style="float: left">${item['est_nombre']}</a>`;
            });



            buttonsPoll += `<a class="wizard-finish" href="#${this_.id}" data-wizard="finish" role="button" style="float: right">${options.buttonLabels.finish}</a>`;
        });

        buttonsPoll += '</div>';
        console.log(buttonsPoll)
    }

EL PROBLEMA

Cuando intento retornar la variable buttonPoll Solo me retorna lo que esta por fuera del get, y no lo que estoy concatenando dentro del get porque sucede esto y como podría solucionarlo?

Agradezco el interes

3 respuestas 3

0

Solo te muestra lo que esta fuera del $.get porque es asincrono, el console.log() es ejecutado antes de que el get termine.

La solución a eso es utilizar un callback, o poner el console.log dentro del get, ya que lo que corre dentro del mismo NO es asincronico.

También podrías utilizar una Promise, te dejo un ejemplo:

let promise = new Promise((resolve, reject) => {


    $.get('home/get_estados', function(data) {

        $.each(data, function(index, item) {
            var selected = '';
            if (validador != null && validador === item['est_id']) {
                selected = 'selected';
            }
            //$(selector).append(`<option value="${item['est_id']}" ${selected}>${item['est_nombre']}</option>`);
            buttonsPoll += `<a class="" role="button" style="float: left">${item['est_nombre']}</a>`;
        });



        buttonsPoll += `<a class="wizard-finish" href="#${this_.id}" data-wizard="finish" role="button" style="float: right">${options.buttonLabels.finish}</a>`;
    });




});

promise.then((successMessage) => {


    buttonsPoll += '</div>';
    console.log(buttonsPoll)



});

Si necesitas mas info de promises las podes encontrar acá https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise

1
  • Hola @Adrian Godoy, gracias por el interes pero lo he implementado y no me ha funcionado :C
    – JDavid
    Commented el 6 nov. 2019 a las 19:23
0

Tenés que modificar el contexto desde donde se crea la función que maneja el resultado del Promise:

function get_estados_encuestas(this_, options, validador = null) {
  var buttonsPoll = '<div class="wizard-buttons">';

  function handlerEach(index, item) {
    var selected = '';
    if (validador != null && validador === item['est_id']) {
      selected = 'selected';
    }
    buttonsPoll += `<a class="" role="button" style="float: left">${item['est_nombre']}</a>`;
  }

  function handlerGet(data)  {
    $.each(data, handlerEach);
    buttonsPoll += `<a class="wizard-finish" href="#${this_.id}" data-wizard="finish" role="button" style="float: right">${options.buttonLabels.finish}</a>`;
  }

  $.get('home/get_estados', handlerGet);
  buttonsPoll += '</div>';
  console.log(buttonsPoll)
}

Hay otras formas de cambiar el contexto también.

1
  • Hola @Matias P. gracias por el interes pero lo he implementado y no me ha funcionado :C
    – JDavid
    Commented el 6 nov. 2019 a las 19:24
0

El problema es que no estás teniendo en cuenta cómo funciona la función $.get(), ésta se ejecuta de manera asíncrona de por lo que tu en la función get lo que indicas es la ruta en donde se encuentra el recurso a obtener (la url) y qué hacer una vez que la petición haya sido respondida. EL qué hacer se conoce como promesa, la función $.get() te promete que va a ejecutar la función que le pases cuando haya obtenido el recurso solicitado.

Debes tener en cuenta que la ejecución del script no se detiene esperando por la respuesta (de allí que $.get() sea asíncrona) por lo que así como está tu código lo que estas indicando es:

  • La función get_estados_encuestas crea una variable llamada buttonsPoll con un string.
  • Se indica a la función get que vaya a la ruta "home/get_estados" y que al obtener los datos se ejecute una función que procese esa respuesta (ésto no se va a ejecutar en éste momento sino cuando se obtenga la respues)
  • Seguidamente se modifica la variable buttonsPoll para concatenar otra cadena de texto.
  • Se retorna la variable buttonsPoll (en éste punto solo tiene el valor inicial más la concatenación del paso anterior)

En tu caso puedes simplemente disparar el proceso que obtiene el recurso y cuando te lleguen los datos procesas la data:

function get_estados_encuestas(this_, options, validador = null) {

        $.get('home/get_estados', function(data) {

            var buttonsPoll = '<div class="wizard-buttons">';

            $.each(data, function(index, item) {
                var selected = '';
                if (validador != null && validador === item['est_id']) {
                    selected = 'selected';
                }
                //$(selector).append(`<option value="${item['est_id']}" ${selected}>${item['est_nombre']}</option>`);
                buttonsPoll += `<a class="" role="button" style="float: left">${item['est_nombre']}</a>`;
            });

            buttonsPoll += `<a class="wizard-finish" href="#${this_.id}" data-wizard="finish" role="button" style="float: right">${options.buttonLabels.finish}</a>`;
            buttonsPoll += '</div>';
            console.log(buttonsPoll)
        });


    }
2
  • Hola @Zerocool. gracias por el interes lo he implementado y funciona, pero hay como un pequeño proeblema y es que retorna desde el get y no desde la funcion en si, entonces la idea seria retornar desde la funcion, por eso cree la vairbale buttonsPoll por fuera del get
    – JDavid
    Commented el 6 nov. 2019 a las 19:25
  • Desde la función lo vas a poder hacer por cómo funciona el $.get() lo que puedes lograr es hacer que la función te retorne esa promesa y hacer algo con ella
    – zerocool
    Commented el 6 nov. 2019 a las 19:53

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.