CODEWITHSUNDEEP
phpjqueryajax
misner3456
misner3456

Reputation: 404

AJAX How do I loop through the contents of each folder without repetitions?

So the output of my webpage currently looks like this:

FOLDER1
images/FOLDER1/folder1_img.jpg
images/FOLDER2/folder2_img.jpg
images/FOLDER3/folder3_img.jpg

FOLDER2
images/FOLDER2/folder2_img.jpg
images/FOLDER3/folder3_img.jpg

FOLDER3
images/FOLDER3/folder3_img.jpg

But what I want to achieve is this:

FOLDER1
images/FOLDER1/folder1_img.jpg

FOLDER2
images/FOLDER2/folder2_img.jpg

FOLDER3
images/FOLDER3/folder3_img.jpg

I want to display images from my folders, but images must be displayed only under their containing folders (instead my error code has every image bundled together and looping like steps which is NOT what I want). I don't know what I am doing wrong. Can somebody PLEASE help me fix this? I've been at it all day and desperately need help. Thank you.

This is the full code:

<!DOCTYPE html>
<html>
<body>
<div class="wflex">
    <div class="wscdfx">
        <?php $items = array("FOLDER1", "FOLDER2", "FOLDER3"); ?>
        <?php foreach ($items as $item): ?>
            <div class="spct"><?php echo $item; ?></div>
            <div class="prodfx"></div>
    </div>
</div>
            <script>
            var folder = "images/<?php echo $item; ?>/";

            $.ajax({
                async: false,
                url : folder,
                success: function (data) {
                  $(data).find("a").attr("href", function (i, val) {
                      if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                          $(".prodfx").append( "<img src='"+ folder + val +"'>" );
                      } 
                  });
                }
            });
            </script>
        <?php endforeach; ?>
</body>
</html>

Upvotes: 1

Views: 528

Answers (2)

pauldrodriguez
pauldrodriguez

Reputation: 490

wasn't able to test everything completely, but the idea is that instead iterating through the folders in php, we instead store them as a global variable in javascript.

we then create function that will take a number as an index to get the folder name from the folders array and will make the javascript call to get the information from the url.

this will in turn create the necessary image elements to be displayed, and will recursively call the same function to get the images for the next item in the array until it reaches the last one.

this can be refactored to look better.

see below and i hope it helps.

<div class="wflex">
    <div class="wscdfx">

    </div>
</div>
<script type="text/javascript">
var items = <?php echo json_encode($items)?>;


function getFileNames(i) {
    if(i >= items.length) {
        return;
    }
     var folder = "images/"+items[i];

    $.ajax({
        async: true,
        url : folder,
        success: function (data) {
            var divNameEl = $('<div class="spct" />').html(items[i]);
            $('.wscdfx').append(divNameEl);
            var divEl = $('<div class="prodfx" />');
            $(data).find("a").attr("href", function (i, val) {
                console.log(i,val);
                if( val.match(/\.(jpe?g|png|gif)$/) ) {

                    divEl.append( "<img src='"+ folder + val +"'>" );

                    $('.wscdfx').append(divEl);
                }
            });

            getFileNames(i+1);
        }
    });
}

getFileNames(0);
</script>

Upvotes: 1

Alejandro Gomez
Alejandro Gomez

Reputation: 80

If all your images are named like the example, probably these changes in your script solve your problem:

    <script>
    var floder = '<?php echo $item; ?>';
    var path = `images/${folder}/`;

    $.ajax({
        async: false,
        url : path,
        success: function (data) {
          $(data).find("a").attr("href", function (i, val) {
              var imageFolder = val.split("_");
              imageFolder = imageFolder[0].toUpperCase();
              if( val.match(/\.(jpe?g|png|gif)$/) && imageFolder == folder) { 
                  $(".prodfx").append( "<img src='"+ folder + val +"'>" );
              } 
          });
        }
    });
    </script>

Upvotes: 0

Related Questions