Error: Undefined after an ajax request inside another

Question

Follows the code:

$("#l_linha").change(function(){
    var linha = $(this).val();
    var dados = $("#l_linha").serialize();
            $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'buscarPonto.php',
            async: true,
            data: dados,
            success: function (response) {
                console.log(response);

                for(i = 0; i < response.length; i++){
                var localizacao = new Array(response.length);

                localizacao[i] = L.latLng(response[i].lat, response[i].lng);

                console.log(localizacao[i]);

                $("#r_ponto").val(response[i].id);
                var ponto = new Array();
                ponto[i] = $("#r_ponto").serialize();
                var address = new Array();
                address[i]= response[i].address;
                var ultimo = new Array();
                var proximo = new Array();

                $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'buscarHorario.php',
                async: true,
                data: ponto[i],
                success: function (response) {
                        console.log(localizacao[i]);
                    for(j = 0; j < response.length; j++){
                        ultimo[j] = response.ultimo;
                        proximo[j] = response.proximo;
                    }
                }
                });
                L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();
            }
        });
});

The problem is that the variable last[j] is Undefined. What if I pass the part:

L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();

into the is(j = 0; j < Sponse.length; j++)... the location variable is Undefined. This code snippet aims to make 2 ajax requests one to list the points of the markers and another to list the specific times of these markers, the part of the back-end is ok only that there.

Answer 1

Yes, the second requisition she will get data undefined in that code:

$("#l_linha").change(function(){
    var linha = $(this).val();
    var dados = $("#l_linha").serialize();
            $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'buscarPonto.php',
            async: true,
            data: dados,
            success: function (response) {
                console.log(response);

                for(i = 0; i < response.length; i++){
                var localizacao = new Array(response.length);

                localizacao[i] = L.latLng(response[i].lat, response[i].lng);

                console.log(localizacao[i]);

                $("#r_ponto").val(response[i].id);
                var ponto = new Array();
                ponto[i] = $("#r_ponto").serialize();
                var address = new Array();
                address[i]= response[i].address;
                var ultimo = new Array();
                var proximo = new Array();

                $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'buscarHorario.php',
                async: true,
                data: ponto[i],
                success: function (response) {
                        console.log(localizacao[i]);
                    for(j = 0; j < response.length; j++){
                        ultimo[j] = response.ultimo;
                        proximo[j] = response.proximo;
                    }
                }
                });
                L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();
            }
        });
});

For, the "sucess" is when there is success in the requisition, then the second continues without waiting for the first, because the Ajax is asynchronous* and because it is asynchronous it happens simultaneously with other requests.

To correct put inside the clause complete:

try this:

$("#l_linha").change(function(){
    var linha = $(this).val();
    var dados = $("#l_linha").serialize();

            $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'buscarPonto.php',
            async: true,
            data: dados,
            success: function (response) {
                console.log(response);

                for(i = 0; i < response.length; i++){
                var localizacao = new Array(response.length);

                localizacao[i] = L.latLng(response[i].lat, response[i].lng);

                console.log(localizacao[i]);

                $("#r_ponto").val(response[i].id);
                var ponto = new Array();
                ponto[i] = $("#r_ponto").serialize();
                var address = new Array();
                address[i]= response[i].address;
                var ultimo = new Array();
                var proximo = new Array();

            }
        }).done(function() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'buscarHorario.php',
                async: true,
                data: ponto[i],
                success: function (response) {
                        console.log(localizacao[i]);
                    for(j = 0; j < response.length; j++){
                        ultimo[j] = response.ultimo;
                        proximo[j] = response.proximo;
                    }
                }
                });
                L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();

        });;
});

In the documentation of jQuery says: "complete callback, when the request ends"