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
    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. 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
    el 25 ago. 2020 a las 0:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.