通过ajax加载图像数组

Question

so I have an array as response when i upload images with dropzone:

{50: "/media/50/twitter cover photos for new year 2016.png", 51: "/media/51/174920-1280.png",…}

50: "/media/50/twitter cover photos for new year 2016.png"
51: "/media/51/174920-1280.png"
52: "/media/52/buy-instagram-followers.jpg"

Now i want to append this:

 <div class="col-lg-2 col-md-4 col-xs-6 thumb">
       <img class="img-responsive" src=" // the values of the response array //" alt="">
       <div class="galleryremovebutton">
          <a href="/delete/ the keys / ids of the response array " class="btn btn-danger" role="button">Izbrisi sliku</a>
       </div>
 </div>

as a loop to this:

<div id="galleryimgs" class="row">

After the complete event of dropzone, that means i would need this code here somewhere:

Dropzone.options.myGalleryDropzone = {

            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 1, // MB
            parallelUploads: 8,
            complete: function () {
                HERE
            }
        };

Answer 1

Using only jQuery, you have a choice between building the DOM through a string or programmatically. Either way, it should be a DOM element wrapped in jQuery:

function makeThumb() {
  // $('html_for_one_thumbnail');
  // $('<div />').append('<div />')...etc;
  return elementForThumb;
}

Then another function to populate the element:

function configureThumb($element, thumb, thumbId) {
  $element.find('img').attr('src', thumb);
  $element.find('a').attr('href', '/delete/' + thumbId);
}

And one more to put it together:

function buildThumbnails($element, thumbs) {
  thumbs.forEach(function(thumb, thumbId) {
    var $thumb = makeThumb();
    $element.append($thumb);
    configureThumb($thumb, thumb, thumbId);
  });
}

Called at the complete, assuming the container is empty:

complete: function(data) {
    buildThumbnails($('#galleryimgs'), data);
}