0

Estou com um problema na criação de um array de objetos. Tenho uma função que faz uma requisição ajax e insere objetos dentro de um array num looping.

Acontece que dentro do success da requisição, o array é mostrado no console e através de um alerta da forma certa, mas fora da requisição o alert aparece como um array vazio, [].

        var arrayEvent = [];

        $.ajax({
            type        :   "POST",
            url         :   http_base + "/agendamento/buscaProfessor",
            data        :   {day:day, month:month, year:year},
            cache       :   false,
            dataType    :   "json",
            success :   function(data)
            {
                for (var i = 0; i < data.length; i++){
                    data[i].data = data[i].data.replace(" ", "T");
                    var obj = {title: String(data[i].professor), start: String(data[i].data)};
                    arrayEvent.push(obj);
                }

                /*1*/alert(JSON.stringify(arrayEvent));
                /*1*/console.log(arrayEvent);
            },
            error   :   function(jqXHR, textStatus, errorThrown)
            {
                console.log(textStatus);
            }
        });

        /*2*/alert(JSON.stringify(arrayEvent));
        /*2*/console.log(arrayEvent);

Resultado do alert do stringify do array

Dentro do success da requisição:

/*1*/[{"title":"Professor2","start":"2018-04-26T17:00:00"},{"title":"Professor 
1","start":"2018-04-27T17:00:00"}]

Fora:

/*2*/[]

Console.log

/*2*/[]

0:{title: "Professor2", start: "2018-04-26T17:00:00"}
1:{title: "Professor 1", start: "2018-04-27T17:00:00"}
length : 2

/*1*/(2) [{…}, {…}]
0:{title: "Professor2", start: "2018-04-26T17:00:00"}
1:{title: "Professor 1", start: "2018-04-27T17:00:00"}
length:2

Como poderia proceder pra resolver esse problema?

13
  • 1
    O Ajax é assíncrono. Quando o script é executado, ao chegar na linha do console.log de fora, o Ajax ainda não respondeu.
    – Meu ovo
    25/04/2018 às 15:38
  • 2
    Se vc quer usar o retorno do Ajax em alguma parte do código fora do success, você deverá fazer uma requisição ao Ajax e esperar a resposta. Usando .then você consegue. Algo parecido com esta resposta: pt.stackoverflow.com/a/281902/8063
    – Meu ovo
    25/04/2018 às 15:46
  • Obrigado pela resposta. No retorno do console, os valores que retorna dos dois arrays são igual, exceto por um contar como array de um elemento só. Não seria só o caso na declaração do array que algo está incorreto? 25/04/2018 às 15:52
  • 1
    Não entendi. Pelo que pude notar é que o console.log dentro do success retorna normal, 2 objetos na array, e fora dele não retorna nada []
    – Meu ovo
    25/04/2018 às 15:59
  • No console.log fora do success ele retorna como se fosse um array vazio (no alert JSON.stringify aparece []), ou de um elemento, com os objetos dentro. Dentro do success, o console.log mostra um array de 2 elementos, e o alert JSON.stringify mostra os objetos dentro do array. 25/04/2018 às 16:04

1 Resposta 1

2

Basicamente o problema é que uma requisição http é assíncrona, por isso o browser vai passar por todo o bloco da sua função javascript, para depois ir ao servidor.

Por causa disso que o bloco abaixo não funciona.

    /*2*/alert(JSON.stringify(arrayEvent));
    /*2*/console.log(arrayEvent);

Está imprimindo array vazio, pois ainda não houve o retorno do servidor. Para que aconteça o que você quer, deve ser utilizado o método done, que será executado quando a sua requisição ajax for executada com sucesso.

Segue alteração no seu código com a solução:

    var arrayEvent = [];

    $.ajax({
        type        :   "POST",
        url         :   http_base + "/agendamento/buscaProfessor",
        data        :   {day:day, month:month, year:year},
        cache       :   false,
        dataType    :   "json",
        success :   function(data)
        {
            for (var i = 0; i < data.length; i++){
                data[i].data = data[i].data.replace(" ", "T");
                var obj = {title: String(data[i].professor), start: String(data[i].data)};
                arrayEvent.push(obj);
            }

            /*1*/alert(JSON.stringify(arrayEvent));
            /*1*/console.log(arrayEvent);
        },
        error   :   function(jqXHR, textStatus, errorThrown)
        {
            console.log(textStatus);
        }
    }).done(function(){
        /*2*/alert(JSON.stringify(arrayEvent));
        /*2*/console.log(arrayEvent);   
    });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .