[Ajax-Jquery ] - Problemas con Array y el HTML

[jc1992]

Buenas tardes!

Tengo un problema desde hace bastante tiempo y se trata de los Arrays con Ajax , yo recibo un array correctamente ahí no está el problema.

Entonces cuándo hago lo siguiente con un .html

Código Javascript:

<script>
    $.ajax({
                url:'obtenersubastas',
                dataType:'json',
                type:'get',
                cache:true,
                success:  function (response) {
                    $(response).each(function(index,value)  {
                            $(".name").html(response[index].nombre);
                    });
 
                },              
        });</script>
 

Y recibo el formato correcto en el html

Código HTML:

<div class="name">edasa</div>
 

En cambio cuándo hago un .append de la siguiente forma

Código Javascript:

success:  function (response) {
                    $(response).each(function(index,value)  {
                            $(".name").append(response[index].nombre);
                    });
 
                },
 

El resultado del HTML

Código HTML:

<div class="name">Nombre1Nombedasa</div>
 

Lo que necesito es ver el HTML con la última estructura , pero cada uno separado por su div.

[Alexis88]

¿Tienes uno o varios <div class="name">?

[jc1992]

Sólo tengo un div class name , pero tampoco me gustaría crearlos manualmente debido a que utilizo PHP en el lado del servidor.

Si hay alguna otra solución acepto propuestas.

[Alexis88]

Lo que no me queda claro es la parte en la que dices:

Iniciado por jc1992

Lo que necesito es ver el HTML con la última estructura , pero cada uno separado por su div.

Pero en el resultado que muestras, noto que los datos llegan solos, es decir, sin ningún elemento que los contenga y además dices que solo tienes un <div class = "name">, entonces, ¿quieres crear un <div> por cada dato, insertarle el dato respectivo y luego añadir ese nuevo <div> a <div class = "name">?

Si fuera así, te basta con crear el <div> dinámicamente:

Código Javascript:

$(".name").append("<div>" + response[index].nombre + "</div>");
 

Saludos

[jc1992]

Vaya era tan sencillo cómo esto

Código Javascript:

$.ajax({
                url:'obtenersubastas',
                dataType:'json',
                type:'get',
                cache:true,
                success:  function (response) {
                    $(response).each(function(index,value)  {
                        $(".name").append("<div class='nombre col-md-3' style='margin:5px;'>" + response[index].nombre + "</div><img src='"+response[index].images [0]+"'></img>");
                    });
 
 
                },              
        });
 

Entonces ahora recibo todas las imágenes correctamente , pero me gustaría poder recorrerlas y añadir cada imagen con su elemento correspondiente

Código Javascript:

$.ajax({
                url:'obtenersubastas',
                dataType:'json',
                type:'get',
                cache:true,
                success:  function (response) {
                    $(response).each(function(index,value)  {
                            $(".name").append("<div class='nombre col-md-3' style='margin:5px;'>" + response[index].nombre + "</div>");
                        $(response[index].images[0]).each(function(index,value)  {
                            $(".images").append("<img src="+value.ruta+"></img>");
                        });
                    });
 
 
                },              
        });
 

El identificador de la subasta , es el siguiente

Código Javascript:

console.log(value.id_subasta);
 

Muchas gracias , espero la respuesta !

[monicapo]

Crea un id para el div, que será el id.subasta, y luego haz el append en ese id.

Código Javascript:

$(response).each(function(index,value)  {
     $(".name").append("<div id="+value.id_subasta+">"+response[index].nombre+"</div>");
     $("#"+value.id_subasta).append("<img src='"+response[index].images [0]+"'></img>");
});