0

estoy reciviendo este array de objetos como callback con una peticion ajax

[
{"nombre":"Kabul"},
{"nombre":"Qandahar"},
{"nombre":"Herat"},
{"nombre":"Mazar-e-Sharif"},
{"nombre":"Otra"}
]

esta es la manera que leo el array de objetos para luego inprimir en un div los resultados

        $.ajax({

        url:url,
        type:"POST",
        datatype:"JSON",
        contenttype:"application/json",

        }).done(function(response){

         var text=response;
         var obj=JSON.parse(text);
         var array=[];

        obj.forEach( ciudad => array.push(ciudad.nombre) );
        //al imprimir esto en la consola el resultado es exitoso ejemplo
        //["kabul","Qandhar","Herat","Mazart-e-Sharif","otra"]
        console.log(array)
        //trato de imprimir el array en un select de esta manera 
        for(i=0; i< array.length; i++){

           $("#myCities").html(array[i])

        }

        })

aunque el push se hace exitosamente en el array a la hora de imprimir el array en el div solo me imprime el ultimo indice del array es decir otra no entiendo por que si el array esta bien y estoy suponiendo que la manera que lo estoy leiendo con el for es la correcta, alguna ayuda?

4
  • Intenta usar .append() en lugar de .html()
    – alanfcm
    Commented el 1 nov. 2018 a las 18:40
  • la cosa es que nececito ir reemplasando los valores con append se irian agregando los resultados y guardando los anteriores
    – andy gibbs
    Commented el 1 nov. 2018 a las 18:42
  • No te entiendo, quieres imprimir todos los varlores del array o solo uno?
    – alanfcm
    Commented el 1 nov. 2018 a las 18:43
  • todos los valores, el array puede cambiar dependiendo de el pais que elija el usuario en un select entonces al elejir el pais en un array de objetos mando todas las ciudades de ese pais entiendes?
    – andy gibbs
    Commented el 1 nov. 2018 a las 18:45

2 respuestas 2

1

Para lograr lo que quieres necesitas limpiar el div cada vez que haces la llamada Ajax. Luego para agregar las opciones usas append. Quedaria asi:

$.ajax({

    url:url,
    type:"POST",
    datatype:"JSON",
    contenttype:"application/json",

    }).done(function(response){

     var text=response;
     var obj=JSON.parse(text);
     var array=[];

    obj.forEach( ciudad => array.push(ciudad.nombre) );
    //al imprimir esto en la consola el resultado es exitoso ejemplo
    //["kabul","Qandhar","Herat","Mazart-e-Sharif","otra"]
    console.log(array)
    //trato de imprimir el array en un select de esta manera 
    $("#myCities").html("");
    for(i=0; i< array.length; i++){

       $("#myCities").append(array[i]);

    }

    })
5
  • por que si funciona con append y no con html?
    – andy gibbs
    Commented el 1 nov. 2018 a las 18:50
  • Porque estoy limipiando el div con esta linea justo antes del for: $("#myCities").html("");
    – alanfcm
    Commented el 1 nov. 2018 a las 18:51
  • Alan esta solución no es buena, porque actualiza el DOM en cada iteracción del bucle. Es mejor construir todo el contenido dentro del bucle en una variable y actualizar el contenedor una sola vez, fuera del bucle.
    – A. Cedano
    Commented el 1 nov. 2018 a las 18:54
  • Tienes razon. Pero en mi opinion, este tipo de optimizaciones no afectan mucho. Si de repente el numero de ciudades estubiera en los miles, quizas verias alguna mejoria.
    – alanfcm
    Commented el 1 nov. 2018 a las 18:57
  • Ya. Pero creo que no es bueno escribir código que induzca a implementar malas prácticas, así sea con una ciudad como con 1000. Luego trabajando con mucho contenido uno que haya aprendido con este código hace lo mismo y ni siquiera sabe el impacto que puede tener.
    – A. Cedano
    Commented el 1 nov. 2018 a las 18:58
1

inteta con esto:

        var datos="";
        $.ajax({

        url:url,
        type:"POST",
        datatype:"JSON",
        contenttype:"application/json",

        }).done(function(response){

         var text=response;
         var obj=JSON.parse(text);
         var array=[];

        obj.forEach( ciudad => array.push(ciudad.nombre) );
        //al imprimir esto en la consola el resultado es exitoso ejemplo
        //["kabul","Qandhar","Herat","Mazart-e-Sharif","otra"]
        console.log(array)
        //trato de imprimir el array en un select de esta manera 
        for(i=0; i< array.length; i++){

           datos+=array[i];

        }

        });
$("#myCities").html(datos)

al asignarlo $("#myCities").html(array[i]) estas remplazando el texto pasado por el siguiente en cada interacion!

1
  • Esta linea: $("#myCities").html(datos) tiene que ir dentro de la llamada Ajax.
    – alanfcm
    Commented el 1 nov. 2018 a las 18:53

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.