0

I get bunch of images from database which is a JSON file. i couldn't display all images on HTML page. I can only display one image on that page. I attached my code below. Anyone give me a hand

      success:function(data){
                    $.each(data, function(index, element) {

                    $('.serachImg').attr("src","/image/"+element.filename);
             });
           },

This is my HtML Code 

     <div class="row" id="search-img-list" style="display:none">
                <!-- Single Product -->
                     <div class="col-12 col-sm-6 col-lg-4" id="single_product">
                             <div class="single-product-wrapper">
                                 <!-- Product Image -->
                             <div class="product-img">
                               <a class="route" href="">

              <img class="serachImg" src="" alt="">  <- I want to display here

                                </a>
                             </div>
                         </div>
                      </div>
                  </div>

Any idea would be helped me out from this problem

Denis Tsoi
  • 9,428
  • 8
  • 37
  • 56
Harish
  • 123
  • 11
  • What problem are you facing ? Images are not displayed ? "i couldn't display all images " - you want to display all images or you want to display the last image. – bhantol Feb 16 '19 at 02:34
  • Ya ...I want to display all images which i got from database.....! – Harish Feb 16 '19 at 03:35

2 Answers2

1

$('.serachImg').attr("src","/image/"+element.filename); -- this will update the attr of the single image that's already in the dom.

Instead, you'll want to append new images to a container element (like a div) in the dom. So, you'd like want to do something like $('.product-img').append($('<html elements...><img src=yourImgSrc /></html content>'))

klhr
  • 3,300
  • 1
  • 11
  • 25
1
$.each(data, function(index, element) {
  var img = `<div class="col-12 col-sm-6 col-lg-4" id="single_product">
                   <div class="single-product-wrapper">
                       <div class="product-img">
                          <a class="route" href="">
                             <img class="serachImg" src="/image/${element.filename}" alt="">  
                           </a>
                        </div>
                   </div>
              </div>`
  $('someSelector').append(img)
});

this is a bit hacky, but without a view library or creating and appending each element,this is the easiest to follow, I would never do this myself.

404 not found
  • 112
  • 8
  • It worked ! But if search anything it will show. then after i search another thing it will show with previous result. What's the problem – Harish Feb 16 '19 at 15:19
  • 1
    `append` appends, you may instead with to create the full `html` string with all of the documents and use `html` to replace. See https://stackoverflow.com/questions/3015335/jquery-html-vs-append for a discussion – klhr Feb 16 '19 at 15:58
  • 1
    or just set `$('someSelector').html('')` before you start – 404 not found Feb 16 '19 at 16:45
  • Hats off Brother – Harish Feb 17 '19 at 04:46
  • Can i use some javacript codes inside of append... I need to use a condition – Harish Feb 17 '19 at 04:47
  • Yes you can use conditions, but to tell you how, you would need to be more specific – 404 not found Feb 17 '19 at 13:36
  • Brother, i want to check prices before display those. for example this one of my code :

    LKR. ${element.metadata.price}

    Here i want to check if this product has any discount if it is then i want to calculate and show final price here.     – Harish Feb 18 '19 at 15:12