Javascript promises, ajax requests ()

4

Greetings,

I have been struggling for a long time with a problem that I can not solve, I hope you can help me, I have reviewed many callback tutorials and promises but I can not solve my problem.

Basically I need to make a request $ .ajax () which brings me data, later in an iterative cycle for each data I make another query $ .ajax () to another table, finally I need to use the data of both queries to fill two fixes and send them as arguments of a function.

With the first request I have no problems and in the second the console shows me that I got the data but I can not show them.

I'll leave you the code I'm doing (I'm working with 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;
  })
}
    
asked by Cristian Slater 05.01.2017 в 07:23
source

1 answer

5

The problem is that the AJAX requests are asynchronous, when you are doing GraphAreaGeneric(datos1, datos2); outside the function it is very likely that data1 and data2 have not been loaded yet.

You have two solutions to the problem:

  • Put the GraphAreaGeneric(datos1, datos2); statement within the .then() leaving it like this:

    $.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!!!");
        });
    
    }
    
  • Making an AJAX request using $.ajax() function with asynchronous mode disabled, explain it very well here . As in the comment below very well said user rnd this option is not recommended as it affects the user's final experience.

  • I hope I have helped you.

    Tell us how you did please!

        
    answered by 05.01.2017 в 08:55