retrieve all images using ajax

Question

retrieve all images using ajax

function checkallfolder(){
  var thumbnailbox = $('#thumbnailbox');
  var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];
  for (var c = 0; c < foldertype.length; c++ ){
    var folder = 'Img/dfolder/'+foldertype[c];
    $.ajax({
      type : "POST",
      url: "data.php",
      contentType:"application/x-www-form-urlencoded",
      dataType: "json",
      data: "folder="+folder,
      success: function(d) {
        var temp = '';
        thumbnailbox.html('');
        for (var obj in d){
          if (d.hasOwnProperty(obj) && d[obj].hasOwnProperty('src') && d[obj].src !== ''){
            var objname = d[obj].name;
            temp += "<div><img name="+d[obj].name+" class='icon' src="+d[obj].src+"></div>";
            console.log(d[obj].src);
          }
        }
        thumbnailbox.html(temp);
      }
    });
  }
}

I am making an AJAX request to check all folders inside an image directory. I use a loop with "for" to iterate through the folders, and I can see in the console log that it is going through all 7 folders and retrieving the objects. However, when I try to display them as "img" elements with "src" attribute, only the last image (folder7/img7) is showing up. I have confirmed that all the "src" values are being fetched, so I should be getting all the images. Can someone help me figure out what is wrong with my code?

javascript ajax

Answer 1

Answer №1

Utilizing closure is key in this scenario.

Challenge:

In JavaScript, variables have function-level scope. When using AJAX (Asynchronous call) within a loop, the loop will continue executing regardless of the AJAX response. This results in the local variable being overwritten each time, causing the variable c to always refer to the value from the last loop iteration.

To address this issue, make foldertype a global variable by moving it outside the function:

 var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];

Then, modify your checkallfolder() function as follows:

...
for (var c = 0; c < foldertype.length; c++){
var folder = getImageSrc(c);
...

Additionally, create an getImageSrc function like this:

function getImageSrc(c){
   return 'Img/dfolder/'+foldertype[c];
}

After implementing these changes, your code should look like this:

var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];


function checkallfolder(){
      var thumbnailbox = $('#thumbnailbox');
      for (var c = 0; c < foldertype.length; c++){
          var folder = getImageSrc(c);
          $.ajax({
                ...ajax code here...
          });
       }
}

function getImageSrc(c){
   return 'Img/dfolder/'+foldertype[c];
}

Answer 2

Utilizing closure is key in this scenario.

Challenge:

In JavaScript, variables have function-level scope. When using AJAX (Asynchronous call) within a loop, the loop will continue executing regardless of the AJAX response. This results in the local variable being overwritten each time, causing the variable c to always refer to the value from the last loop iteration.

To address this issue, make foldertype a global variable by moving it outside the function:

 var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];

Then, modify your checkallfolder() function as follows:

...
for (var c = 0; c < foldertype.length; c++){
var folder = getImageSrc(c);
...

Additionally, create an getImageSrc function like this:

function getImageSrc(c){
   return 'Img/dfolder/'+foldertype[c];
}

After implementing these changes, your code should look like this:

var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];


function checkallfolder(){
      var thumbnailbox = $('#thumbnailbox');
      for (var c = 0; c < foldertype.length; c++){
          var folder = getImageSrc(c);
          $.ajax({
                ...ajax code here...
          });
       }
}

function getImageSrc(c){
   return 'Img/dfolder/'+foldertype[c];
}

Answer 3

Answer №2

Create an array and add the value "temp" to it. Then, assign arr.toString() to thumbnailbox.html()

function checkAllFolders(){
    var thumbnailBox = $('#thumbnailbox');
    var folderType = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];
    for (var c = 0; c < folderType.length; c++){
        var folder = 'Img/dfolder/' + folderType[c];
        var arr = new Array();
        $.ajax({
            type: "POST",
            url: "data.php",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            data: "folder=" + folder,
            success: function(data){
                var temp = '';
                thumbnailBox.html('');
                for (var obj in data){
                    if (data.hasOwnProperty(obj) && data[obj].hasOwnProperty('src') && data[obj].src !== ''){
                        var objName = data[obj].name;
                        temp += "<div><img name=" + data[obj].name + " class='icon' src=" + data[obj].src + "></div>";
                        arr.push(temp);
                        console.log(data[obj].src);
                    }
                }
                //thumbnailBox.html(temp);
            }
        });
    }
    thumbnailBox.html(arr.toString().replace(/,/g, ""));
}

Answer 4

Create an array and add the value "temp" to it. Then, assign arr.toString() to thumbnailbox.html()

function checkAllFolders(){
    var thumbnailBox = $('#thumbnailbox');
    var folderType = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];
    for (var c = 0; c < folderType.length; c++){
        var folder = 'Img/dfolder/' + folderType[c];
        var arr = new Array();
        $.ajax({
            type: "POST",
            url: "data.php",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            data: "folder=" + folder,
            success: function(data){
                var temp = '';
                thumbnailBox.html('');
                for (var obj in data){
                    if (data.hasOwnProperty(obj) && data[obj].hasOwnProperty('src') && data[obj].src !== ''){
                        var objName = data[obj].name;
                        temp += "<div><img name=" + data[obj].name + " class='icon' src=" + data[obj].src + "></div>";
                        arr.push(temp);
                        console.log(data[obj].src);
                    }
                }
                //thumbnailBox.html(temp);
            }
        });
    }
    thumbnailBox.html(arr.toString().replace(/,/g, ""));
}

retrieve all images using ajax

Answer №1

Answer №2

Similar questions

Send an AJAX request to redirect to a different page on a PHP server

Activate divs with Bootstrap5 modal toggle functionality

Why do two date type variables have identical content?

Transfer an image using an ajax form using Python and Selenium

Fixing the errors outlined below

Attempting to conditionally map an array of objects

AngularJS module dependencies configuration functions smoothly during initialization

What is the best way to retrieve AWS secret values using JavaScript?

The HTML generated by Selenium using Javascript is still missing some elements, despite accessing the document.body.innerHTML

What is the best way to display toastr messages in an Angular application?

Tips on organizing and designing buttons within a canvas

Utilizing _.partial on a single-argument function

Using remote: true with select_tag in Rails allows the select menu to dynamically

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

Trouble with the Ajax search feature in Laravel

Python code that extracts data from an AJAX website

Angular causing WKWebview to freeze

What causes req.sessions to show an empty object instead of the expected value?

In Stripe.js, the background color and height of the credit card input cannot be customized

Having trouble locating an element on a webpage? When inspecting the element, are you noticing that the HTML code differs from the source page?