0

Tengo un ciclo for y dentro una llamada ajax. En el success utilizo una variable que se "procesa" con el ciclo y es diferente para cada llamada en el ajax. El problema esta en que el success no parece estar tomando los valores correspondiente para esta variable.

Ejemplo:

 for(var i = 0; i < longitud; i++) {
      $.ajax({
         url: url,
         data: data,
         type: 'POST',
         success: function(data) {
              if(data.status){
                   // En este punto i es undefined
                   $("#div"+i).html("Hi");
              }
         }
      });
 }
5
  • has un console.log() de data y fijate que te imprime en la consola del navegador Commented el 21 dic. 2017 a las 23:30
  • data no tiene problemas, la condición se cumple.El problema esta al tratar con el valor i, parace que en todas las llamadas siempre toma el último valor de i Commented el 21 dic. 2017 a las 23:34
  • No confundas success con done, me parece que lo que tu buscas es el done, es decir lo que traes de la url un poco más de info
    – Sr1871
    Commented el 21 dic. 2017 a las 23:38
  • si sabes que un ajax dentro de un ciclo puede reventar con una conexion lenta? Commented el 21 dic. 2017 a las 23:44
  • pon tu codigo completo Commented el 21 dic. 2017 a las 23:44

2 respuestas 2

3

Amigo las peticiones ajax son asincrónicas lo que quiere decir que no sabes cuando dure en volver la respuesta.

Por eso el for si ejecuta las peticiones pero la variable i la obtiene al volver osea después de el tiempo que tomo en ir y hacer la petición así que i vale 10 porque el tiempo de el for es mucho mas rápido que el de cada petición dentro de el.

Espero te ayude saludos.

NOTA: Se uso un API de prueba para hacer la consulta.

Ejemplo

var root = 'https://jsonplaceholder.typicode.com';

for(var i = 0; i < 10; i++) {

$.ajax({
  url: root + '/posts/1',
  method: 'GET'
}).then(function(data) {
  console.log(i);
});

 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solucion

Si quieres puedes hacer una function re cursiva que solo se ejecuta al retornar el ajax seria como tu propio for

La idea es ejecutar el ajax y que al retornar llame a la misma funcion pero con la variable de condición con un numero mas hasta que se cumpla y no se ejecute mas el Ajax.

Ejemplo funcional

var root = 'https://jsonplaceholder.typicode.com';

 var numero = 0
 function miFor(numero){
  if(numero<10){
  $.ajax({
  url: root + '/posts/1',
  method: 'GET'
   }).then(function(data) {
   console.log(numero);
   numero++
   miFor(numero)
 });
  }
 }
 miFor(0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
  • Exactamente esto es lo que esta pasando. No abra una forma de adjuntar estos valores para luego usarlos en cualquier lugar del AJAX ? Commented el 22 dic. 2017 a las 0:02
  • puedes hacer el segundo ejemplo que puse para solucionarlo amigo Commented el 22 dic. 2017 a las 0:04
  • Gracias por la ayuda Commented el 22 dic. 2017 a las 0:16
  • De nada amigo que bueno poder ayudarte. Commented el 22 dic. 2017 a las 0:20
0

Debes hacer que tus peticiones ajax sean sincronas. jQuery.ajax() tiene uno de sus parametros destinado a tal fin async que por defecto es true.

var root = 'https://jsonplaceholder.typicode.com';

for(var i = 0; i < 10; i++) {

    $.ajax({
        url: root + '/posts/' + i,
        method: 'GET',
        async:false
    }).then(function(data) {
        console.log(data);
    });

 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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.