0

Tengo el siguiente bloque de código, que ejecuta una llamada y recibe un valor (data) correctamente. Ahora yo quiero guardar cada elemento de data en la variable listaTurnos mediante array.push. Como pueden ver, hay dos console.log, uno que esta por fuera del ajax y otro que esta por dentro. Mi problema es que primero se ejecuta el de afuera (arroja 0) y luego se ejecuta el de adentro (arroja 2).

Yo quiero mantener mi variable listaTurnos cargada al salir de la funcion ajax para poder trabajar con dicha variable, pero siempre está vacía.

A su vez, si yo creo una variable dentro del success el ajax, por ejemplo var listaTurnos2 = listaTurnos;, cuando salgo de la funcion ajax y quiero hacer referencia a la variable listaTurnos2 me marca como que la variable no existe.

var listaTurnos = [];
$(document).ready(function() {
    $.ajax({
        type: 'POST',
        url: 'ajax/turnos2.ajax.php',
        dataType: "json",
        data: { item: "a" },
        success: function(data) {
            readData(data);
        },
        error: function(data) {
        }
    });
    function readData(data) {
        data.forEach(e => {
            listaTurnos.push(e["datos"])
        });
        console.log(listaTurnos.length)
    }
});


console.log(listaTurnos.length)

1 respuesta 1

0

El problema es que el metodo $.ajax viene con async = true por defecto, esto hace que tu segundo console.log se ejecute sin esperar la respuesta de tu ajax, te recoumiento que coloques async: false para evitar este inconveniente. Así, primero ejecutará tu código ajax y luego tu console.log.

Con respecto a lo de la variable dentro del Ajax o dentro de la función, te recomiendo que estudies más sobre los scopes en JavaScript ya que al declarar una variable dentro de una función esta misma no funciona fuera de ella. Lo que puedes hacer es como hiciste con el listaTurnos y declarar una variable en el scope global para poder usarla dentro del ajax.

EDIT: Otra cosa que no te había explicado es que el código ajax que estás ejecutando dentro del $(document).ready se ejecuta solo hasta que la página ya haya cargado, esto trae como consecuencia que tu console.log que se encuentra fuera de esta función no obtenga el resultado que esperas, para que aprendas más acerta de los Scopes te recomiendo este artículo.

https://platzi.com/blog/como-funciona-el-scope-en-javascript/

var listaTurnos = [];
var listaTurnos2 = [];

$(document).ready(function() {

    $.ajax({
        type: 'POST',
        url: 'backend/api/utils.php?fun=obtenerColor',
        dataType: "json",
        data: 'id=' + 1,
        async: false,
        success: function(data) {
            readData(data);
        },
        error: function(data) {
        }
    });
    function readData(data) {
        data.forEach(e => {
            listaTurnos.push(e["datos"])
        });
        console.log(listaTurnos.length)
        listaTurnos2 = listaTurnos;
    }

    console.log(listaTurnos.length)
    console.log(listaTurnos2.length)

});
1
  • Ahora voy a probar lo que decis, de todas maneras lo solucione metiendo la llamada a ajax adentro de una promesa, y en el resolve guardo lo que necesito en el localStorage. Ahi funcionó correctamente, ya estoy trabado en el siguiente inconveniente jaja. En unos ratos pruebo esto, que mas alla que no lo vaya a usar puede ser una buena solucion para mas adelante. Gracias
    – Agustin G.
    Commented el 16 mar. 2020 a las 13:52

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.