4

Saludos,

Llevo mucho tiempo batallando con un problema que no puedo resolver, espero me puedan ayudar,he revisado muchos tutoriales sobre callback y promesas pero no logro solucionar mi problema.

Básicamente necesito realizar una peticion $.ajax() la cual me trae datos, posteriormente en un ciclo iterativo por cada dato realizo otra consulta $.ajax() a otra tabla, finalmente necesito utilizar los datos de ambas consultas para llenar dos arreglos y enviarlos como argumentos de una funcion.

Con la primera peticion no tengo inconvenientes y en la segunda la consola me muestra que obtuve los datos pero no puedo mostrarlos.

les dejo el codigo que estoy realizando (estoy trabajando con jquery):

// Funcion para traer datos adicionales por cada registro
function funcionAsync(urlDestino){
  // La función devuelve una Promise
    return new Promise(function(resolver, rechazar){
        jQuery.ajax({
          url: urlDestino,
          success : function(data){resolver(data)},
          error : function(error){rechazar(error)}
        });    
    });
}

// Funcion principal para solicitar datos con Ajax
function TraeDatosConAjax(){

var datos1 = [], datos2 = [];
var urlPrincipal = $("#urlPrincipal").val(); // URL Base

$.getJSON(urlPrincipal+'MetodoTraeDatos1') // Primera peticion Ajax
  .then(function(respuesta) {
    labelx = "";

    for (var i = 0; i < respuesta.length; i++) {
        ini = respuesta[i].ini_semana; // fecha inicial
        fin = respuesta[i].fin_semana; // fecha final
        var datos = "";

        labelx = abreviaRangoFechas(ini, fin); // Funcion que abrevia el rango de fechas
        // Llenamos el primer array (datos1) con datos (SE LLENA SIN PROBLEMAS)
        datos1.push({
            y: parseInt(respuesta[i].cant_capacidad), label: labelx, s: respuesta[i].id_semana,
        });

        // Llenaremos datos2 con la funcion asincrona
        datos = funcionAsync(urlPrincipal+'MetodoTraeDatos2/'+respuesta[i].id_semana+'/')
        .then(function(datosDevueltos){
            if ($.isNumeric(datosDevueltos[0].cantprog_progweek)) {valor = datosDevueltos[0].cantprog_progweek;}else{valor = 0;}
            // lleno el segundo array con datos de la segunda peticion (ACA TENGO EL PROBLEMA PARA LLENAR EL ARRAY)
            /********************************************************/
            datos2.push({
                y: parseInt(valor), label: labelx,
            });
            /********************************************************/
            return valor;
        }, function(errorLanzado){
          // Aquí el código para hacer algo cuando ocurra un error.
          alert("Fallo!!!");
        });
        //alert("Fuera: "+datos); //return datos1; // LO EXTRAÑO ES QUE SI LE QUITO EL COMENTARIO A ESTE ALERT() OBTENGO LOS DATOS QUE NECESITO
    }
    // Aca necesito asignar ambos array (datos1 y datos2) como argumento de "GraphAreaGeneric" * DATOS1 SE CARGA SIN PROBLEMAS, DATOS2 SE CARGA SOLO SI DESCOMENTO EL ALERT()*
    GraphAreaGeneric(datos1, datos2);
    //return datos1;
  })
}

1 respuesta 1

5

El problema está en que las peticiones AJAX son asincrónicas, cuando vos estás haciendo GraphAreaGeneric(datos1, datos2); fuera de la función es muy probable que datos1 y datos2 no hayan sido cargados aún.

Tenés dos soluciones al problema:

  1. Poner la sentencia GraphAreaGeneric(datos1, datos2); dentro del .then() quedando así:

    $.getJSON(urlPrincipal+'MetodoTraeDatos1') // Primera peticion Ajax
    .then(function(respuesta) {
        labelx = "";
    
        for (var i = 0; i < respuesta.length; i++) {
            ini = respuesta[i].ini_semana; // fecha inicial
            fin = respuesta[i].fin_semana; // fecha final
            var datos = "";
    
            labelx = abreviaRangoFechas(ini, fin); 
            datos1.push({
                y: parseInt(respuesta[i].cant_capacidad), label: labelx, s: respuesta[i].id_semana,
        });
    
        // Llenaremos datos2 con la funcion asincrona
        funcionAsync(urlPrincipal+'MetodoTraeDatos2/'+respuesta[i].id_semana+'/')
        .then(function(datosDevueltos){
            if ($.isNumeric(datosDevueltos[0].cantprog_progweek)) {valor = datosDevueltos[0].cantprog_progweek;}else{valor = 0;}
            // lleno el segundo array con datos de la segunda peticion (ACA TENGO EL PROBLEMA PARA LLENAR EL ARRAY)
            /********************************************************/
            datos2.push({
                y: parseInt(valor), label: labelx,
            });
            /********************************************************/
            GraphAreaGeneric(datos1, datos2);
            datos = valor;
        }, function(errorLanzado){
          // Aquí el código para hacer algo cuando ocurra un error.
          alert("Fallo!!!");
        });
    
    }
    
  2. Hacer una petición AJAX usando la función $.ajax() con el modo asíncrono desactivado, lo explican muy bien acá. Como en el comentario de abajo muy bien dijo el usuario rnd esta opción no se recomienda ya que afecta la experiencia final del usuario.

Espero haberte ayudado.

Comentanos como te fue por favor!

7
  • 2
    Con respecto a la opcion 2: desactivar el modo asincronico tiende a empeorar la experiencia del usuario por que la interface puede bloquearse. Commented el 5 ene. 2017 a las 10:54
  • Me olvidé de aclararlo! Gracias por el comentario!
    – Genarito
    Commented el 5 ene. 2017 a las 17:19
  • Gracias por tu rápida respuesta. Estube realizando pruebas de acuerdo a la solucion 1 que me indicas y efectivamente al poner la sentencia GraphAreaGeneric(datos1, datos2); dentro del .then(), me carga correctamente los datos. El problema que me surge es que los datos que trae la funcion funcionAsync() llegan desordenados. ¿alguna idea de como ordenarlos?... nuevamente agradesco tu respuesta. la opcion 2 no la utilice pues como dice "rnd" no la recomiendan. Commented el 5 ene. 2017 a las 19:51
  • Me alegro que te haya servido! No entendí a que te refieres con "desordenados"?
    – Genarito
    Commented el 5 ene. 2017 a las 20:00
  • Dentro del ciclo for() por cada registro, con la funcion funcionAsync() busco un dato asociado a cada id, el problema es que cuando muestro los datos estan desordenados (el dato no corresponde al id que lo solicito). Por lo que he leido esto es normal que ocurra al ser una funcion asincrona y tambien he leido que eso se puede controlar con algo como: setTimeout(function() {}, 0 | Math.random() * 100); pero la verdad no he encontrado la forma. Espero se entienda. Commented el 5 ene. 2017 a las 20:22

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.