1

Hola estoy tratando de llamar a una función en la respuesta de un ajax, pero de respuesta a esa petición me esta dado undefined, quiero pensar porque es una petición asíncrona , debo usar una promesa o algo así?

    function getmateria(id){
    $.ajax({
        url: '/materias/datos/'+id,
        type: 'GET',
        dataType: 'json',
        success: function(resp) {
            console.log(resp);
           return resp[0].carrera

        },
        error: function(jqXHR, textStatus, errorThrown) {
            var data = jqXHR.responseJSON;
            if (jqXHR.status == 401) {
                //location.reload();
            }

        }
    });
}


function materias(iduser,idcuatri){
    $.ajax({
        url: '/cuatrimestres/materias/datos/'+idcuatri+'/'+iduser,
        type: 'GET',
        dataType: 'json',
        success: function(resp) {
            console.log(resp);
            resp.forEach(x => {
               
                var materiaName =  getmateria(x.id); // JUSTO AQUI materiaName me da undefined
                alert(materiaName);
            });
           

        },
        error: function(jqXHR, textStatus, errorThrown) {
            var data = jqXHR.responseJSON;
            if (jqXHR.status == 401) {
                //location.reload();
            }

        }
    });
}
1

2 respuestas 2

2

Tu función esta retornando undefined, en donde deberías recuperar las materias es en el callback que asignas a la propiedad success. La respuesta la obtienes de forma asíncrona y la forma de procesarla es con esas funciones que asignas propiedades success y error.

Tu función getMateria ya ha finalizado cuando se va a procesar una respuesta.

No hay posibilidad de que getMateria retorne las materias ya que no especificas un valor de retorno con la sentencia return, cuando no haces eso, por defecto se retorna el valor undefined. Así funcionan las funciones en javascript.

Cuando hay respuesta, el callback se agrega a la cola de eventos y cuando es su turno se ejecuta y ahí podrás procesar los datos que has pedido.

Actualización

Veo que deseas pedir una materia por cada registro obtenido de la petición que haces en materias(iduser,idcuatri).

Podrías tener esta función y este array, luego puedes ir agregando los registros al array a medida que vayan llegando y usar lo que hay en el array a como lo requieras después de agregar el nuevo registro.

const materiasNames = [] 

function addMateria(recoord){
   materiasNames.push(recoord) 
   console.log(materiasNames)
}

El callback que pasas a $.ajax() en tu función getmateria tiene como lexical scope el scope de getmateria y el global. por ello cada vez que se ejecute puede acceder a la función addMateria.

addMateria al tener como lexical scope al ámbito global, puede acceder al array.

Finalmente quedaría así mi solución

const materiasNames = [] 

function addMateria(recoord){
   materiasNames.push(recoord) 
   console.log(materiasNames)
}

function getmateria(id){
    $.ajax({
        url: '/materias/datos/'+id,
        type: 'GET',
        dataType: 'json',
        success: function(resp) {
             addMateria(resp[0].carrera)
        },
        error: function(jqXHR, textStatus, errorThrown) {
            var data = jqXHR.responseJSON;
            if (jqXHR.status == 401) {
                //location.reload();
            }
        }
    });
}


function materias(iduser,idcuatri){
    $.ajax({
        url: '/cuatrimestres/materias/datos/'+idcuatri+'/'+iduser,
        type: 'GET',
        dataType: 'json',
        success: function(resp) {  
            resp.forEach(x => {
                getmateria(x.id);
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            var data = jqXHR.responseJSON;
            if (jqXHR.status == 401) {
                //location.reload();
            }
        }
    });
}

Al final tu función getmateria como cualquier otra llamada, termina de ejecutarse, al no tener return devuelve undefined y el callback asíncrono es ejecutado cuando le toca pero no hay manera en que recuperes su valor de retorno.

Saludos.

2
  • y return resp[0].carrera ??? no es el return que necesito? el 15 jun. 2020 a las 13:53
  • Nope, no puedes recuperar ese return, lo que puedes hacer es tener una variable global y asignar la respuesta que obtienes en el callback a esa variable. Al final tu función getmateria como cualquier otra llamada, termina de ejecutarse, al no tener return devuelve undefined y el callback asíncrono es ejecutado pero no hay manera en que recuperes su valor de retorno. Lo de recuperar el valor de una llamada directamente lo puedes hacer usando promesas junto con async y await.
    – Ana Todd
    el 15 jun. 2020 a las 19:13
1

Como mencionas, las peticiones ajax siempre son asíncronas. Para poder obtener el resultado que requieres lo puedes hacer mediante promesas.

Te dejo esta liga que es una pequeña guía de lo que son y como implementarlas

guía para usar promesas

Conforme a tu código se puede solucionar de la siguiente forma:

$(document).ready(function () {
    //se obtinenen las materias
    materias(1, 22);

})

function materias(iduser, idcuatri) {
    $.ajax({
        //url: '/cuatrimestres/materias/datos/' + idcuatri + '/' + iduser,
        url: "https://reqres.in/api/users",
        type: 'GET',
        dataType: 'json',
        success: function (resp) {
            console.log(resp.data);
            resp.data.forEach(function (x) {
                //Una vez que se obtiene la info de forma correcta
                //se procede a ontener la información de cada materia conforme al ID recibido
                getmateria(x.id)
                    .then(function (result) {
                        //Se obtiene la información de la materia
                        // es lo que se devuelve en la función resolve() de la promesa creada
                        //y puedes haacer con esa info lo que necesites
                        console.log('result', result);
                    })
                    .catch(function (error) {
                        //aquí se atraparian todos los errores que le pases a la función
                        //reject() de la promesa que se creó
                        console.log(error);
                    });

            });
        },
        error: function (jqXHR, textStatus, errorThrown) {
            var data = jqXHR.responseJSON;
            if (jqXHR.status == 401) {
                //location.reload();
            }

        }
    });
}

function getmateria(id) {
    //se manda ha realizar la petición lo cual devuelve mediante una promesa
    return new Promise(function (resolve, reject) {
        $.ajax({
            //url: '/materias/datos/' + id,
            url: 'https://reqres.in/api/user/' + id,
            type: 'GET',
            dataType: 'json',
            success: function (resp) {
                //console.log(resp);
                //return resp[0].carrera
                resolve(resp.data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                var data = jqXHR.responseJSON;
                if (jqXHR.status == 401) {
                    //location.reload();
                }
                reject('El error que requieras mandar')
            }
        });
    });
}

Para este ejemplo ocupé https://reqres.in/[][2] para simular las peticiones, solo cambia esas URL por las tuyas

Nota

Las promesas no funcionan en internet explorer, de ser muy necesario lo debes hacer mediante callbacks

Checa su compatibilidad https://caniuse.com/#search=promise

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.