0
$(document).ready(function() {
    $.ajax({
        url: 'url',
        method: "get",
        dataType: "json",
    }).done(function(data) {
        console.log(data);
        $.each(data, function(i, item) {
            console.log(item);
            img = item.items[0].images[0].imageUrl;
            $(".imgproduct").attr('src', img);
        });

    })
});

aquí estoy consultando las img de un producto, pero a la hora de mostrarlas solo se visualiza la ultima como hago para que se visualicen todas?

   <div class="product">
        <img src="" class="imgproduct" alt="">
    </div>

2 respuestas 2

1

No estoy seguro de cómo luzca tu JSON, pero espero que mi ejemplo te ayude a obtener el resultado que estás buscando:

var data = [
   {
      "items": {
         "images": [
            { imageUrl: "https://i.imgur.com/qoH7ZSh.jpg" },
            { imageUrl: "https://i.imgur.com/YCLm7eO.jpg" },
            { imageUrl: "https://i.imgur.com/EeUd8s7.jpg" }
        ]
      }
   },
   {
      "items": {
         "images": [
            { imageUrl: "https://i.imgur.com/hUrQr4v.jpg" },
            { imageUrl: "https://i.imgur.com/D6J7O5u.jpeg" },
            { imageUrl: "https://i.imgur.com/uDDF2pP.jpg" }           
         ]
      }
   }
];

$.each(data, function(index, item) {
    
    for(var image of item.items.images) {
       
       var html = '<img src="' + image.imageUrl + '" class="imgproduct" alt="" width="250px" height="250px"><br>';
       $(".product").append(html); 
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="product">
    <!--<img src="" class="imgproduct" alt="">-->
</div>

Por cierto, en tu código puedes quitar los atributos width y height de la etiqueta <img>. Yo solo los incluí porque algunas de las imágenes son demasiado grandes.

0

Estas pasando como atributo una imagen a una clase, a una etiqueta solamente, lo que se me ocurre que hagas es lo siguiente:

jQuery

$(document).ready(function() {
    $.ajax({
        url: 'url',
        method: "get",
        dataType: "json",
    }).done(function(data) {
        console.log(data);
        $.each(data, function(i, item) {
            console.log(item);
            img = item.items[0].images[0].imageUrl;
            html = "<img src='"+img+"' class='imgproduct' alt=''>"
            $(".product").html(html);
        });

    })
});

HTML :

<div class="product"></div>

De manera que en el elemento padre .product se agregue cada div.imgProduct con cada imagen

3
  • Ya edite, disculpa, en la variable html que almacena el texto con la etiqueta img agrega la variable img en el src=""
    – Abdiel
    Commented el 25 ago. 2020 a las 0:32
  • me sigue mostrando solo una img, y la variable img la concaquetene porque salía error, cambien el html por append y ya me funciono. Commented el 25 ago. 2020 a las 0:42
  • Porque colocas "item.items[0].images[0].imageUrl"?? Tendrías que traer cada una de ellas y solo traes del indice [0] , en dado caso deberás iterar él índice de cada una
    – Abdiel
    Commented el 25 ago. 2020 a las 0:54

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.