detalle en forech y append div

[catpaw]

que tal forer@s!!


Veran estoy implementando un forech en jquery, por cada elemento quiero que se cree un div con un id unico y posteriormente asignarle datos a cada div creado, este es mi codigo:

Código Javascript:

$(document).ready(function(){
$("#go").click(function(){
var items = $('#items').val();
var array_items = items.split(",");
array_items.forEach(function(item) {
    if(item!=null || item!='')
    item = item.trim();
    //crear el div por cada item
    divResult = 'container_'+item; //el item es un valor unico
    $('#container').append('<div id="'+divResult+'">'+item+'</div>');
    //send ang get the data
    $.getJSON('get_data.php', {"item":item}, function(data) {
        alert('d '+JSON.stringify(data)); //el alert me muestra la data bien en cada vuelta
        $('#'+divResult).text(JSON.stringify(data));
        });
});
});
});
 

Código HTML:

<!--codigo relevante html-->
<a id="go" href="#">Ir</a>
<textarea id="items" name="items" cols="30" rows="5"></textarea>

<div id=container></div> 

El problema es que solo me manda la data del ultimo item, por ejemplo, si yo en el text area escribo: 1, 2, 3 en el container me muestra:

Código:

1
2
[{label:value}, {...}] //imaginemos el formato json XD

por lo que veo ahi es que si crea los div, por que estoy visualizando los valores de los items que recibe, y solo en el ultimo item devuelve la data en su div correspondiente.

Algo estoy malinterpretando con mi función o ustedes que opinan?

[catpaw]

Creo que ya voy viendo que pasa, quite el foreach y puse un simple for, aunque trabaja igual me imagino, tambien agregue unos alert para ir viendo:

Código Javascript:

for(i=0;i<array_items.length;i++){
    item = array_items[i];
    if(item!=null || item!='')
    item = item.trim();
    divResult = 'container_'+item;
    $('#container').append('<div id="'+divResult+'"></div>');
    alert('{"item":'+item+'}');
    $.getJSON('get_data.php', {"item":item}, function(data) {
        
    })
    .success(function(data) { 
        $('#wait').remove();
        alert(item+' '+JSON.stringify(data));
    })
    .error(function(jqXHR, textStatus, errorThrown) { 
        $('#wait').remove();
        $('#container').html(jqXHR.responseText); 
    });
}
 

bueno sigo con mi ejemplo de poner en el textarea 1, 2, 3 y pasa lo siguiente con los alerts:

alert1 = alert('{"item":'+item+'}'); //antes de enviar la data
alert2 = alert(item+' '+JSON.stringify(data)); //en el success del getjson al recibir la data

alert1 = {"item":1}
alert2 = 2 {"item":1}
al mismo tiempo del alert2 se vuelve a lazar el alert1
alert1 = {"item":2}
alert2 = 3 {"item":2}
alert1 = {"item":3}
alert2 = 3 {"item":3}

si observan el proceso ocurre tan rapido y de forma no secuencial que cuando pide el 1 ya se esta corriendo el 2 y se desfasa todo, y si le quito los alerts incluso pasa aun mas rapido que solo se muestra el ultimo.

entonces de alguna forma que desconozco, y espero su apoyo como siempre, es ver como hacer esperar por la respuesta y asignar la respuesta al div y luego hacer el siguiente, en pocas palabras, que actue de forma secuencial.

Alguien tiene alguna sugerencia? Gracias de antemano.

[catpaw]

Hola, buenas noticias

A no ser que tengan alguna objeción ya resolvi el asunto, efectivamente era cosa del procesamiento secuencial, por lo cual tuve que prescindir del $getjson y poner un $ajax normal para poder dejar la opcion async en false.

Código Javascript:

$.ajax({
    dataType: "json",
    url: 'get_data.php',
    data: {"item":item},
    async: false,
    success: function(data) { 
        $('#wait').remove();
        $('#'+divResult).text(JSON.stringify(data));
    },
    error: function(jqXHR, textStatus, errorThrown) { 
        $('#wait').remove();
        $('#container').html(jqXHR.responseText); 
    } 
});
 

Como ven?