-1

How can I create a function that loops through a folder in my directory called "data." It contains only image files, and I will keep adding more image files to it. Previously, I was using the following function that returns an array of URLs:

function _image_urls(){return(
    [
      "https://images.pexels.com/photos/4050284/pexels-photo-4050284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=600",
      "https://images.pexels.com/photos/2002719/pexels-photo-2002719.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/919606/pexels-photo-919606.jpeg?auto=compress&cs=tinysrgb&w=600",
      "https://images.pexels.com/photos/1983038/pexels-photo-1983038.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/1702624/pexels-photo-1702624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/3631430/pexels-photo-3631430.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/135018/pexels-photo-135018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/161154/stained-glass-spiral-circle-pattern-161154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ]
    )}

I'm trying to create a function that returns an array of paths for all the images in the data folder. I have been trying the following approach:

function _image_urls(){
  const image_folder = 'data';
  const image_extension = '.jpg';
  let image_urls = [];
  for (let i = 0; i < 10; i++) {
    let image_url = image_folder + i + image_extension;
    image_urls.push(image_url);
  }
  return image_urls;
}
evolutionxbox
  • 3,932
  • 6
  • 34
  • 51
Maaz
  • 19
  • 4
  • 3
    It's good to know what you want, but you haven't actually asked a question. "I need X" is a demand/requirement, not a question. Please share the code you're using to achieve the requirement as a [mcve] – evolutionxbox Jan 26 '23 at 15:29
  • 2
    "How can I X" is not really enough. Please share the code you're using to achieve the requirement as a [mcve] – evolutionxbox Jan 26 '23 at 16:16
  • Does this answer your question? [How to recursively read local files and directories in web browser using File System Access API](https://stackoverflow.com/questions/64283711/how-to-recursively-read-local-files-and-directories-in-web-browser-using-file-sy) – jsejcksn Jan 26 '23 at 23:45

1 Answers1

0

It seems like this will just return an array like:

[
"data0.jpg",
"data1.jpg",
"data2.jpg",
"data3.jpg",
"data4.jpg",
"data5.jpg",
"data6.jpg",
"data7.jpg",
"data8.jpg",
"data9.jpg"
]

If that's what you're getting, then you need to use i as the index for an array that contains the file names.

The bigger question is how are you getting that list of files in the first place? This is generally not something that JavaScript can do on its own. If the files exist on the server, you'd need some server-side script to actually access the folder and output the array of file names - this can then be put into an array several ways (either writing it directly to the code if you allow your server side code to process the JS file or probably more likely using an XHR to request the file names and then populate the array when you get the response.)

If you write this server side script such that it formats the output as JSON, then it could simply be a matter of using JSON.parse() to convert the output to an array directly without any need to iterate over the response such as the function in the question.

EDIT/UPDATE after comment from OP:

Since you're using PHP on the server side, I would create a server side script that readers the contents of the "Data" folder and outputs a JSON formatted string which can then be parsed by the JS on the front end.

In general, this is done using the scandir function. See https://www.php.net/manual/en/function.scandir.php for details.

and the steps would be as follows:

  1. Use scandir to get an array of files in the Data folder
  2. Remove the first two items in the array (. and ..)
  3. Use the json_encode function to convert the array to a JSON formatted string
  4. Echo that string

Then on the page where you have your JS you have two options:

  1. Include the PHP script described above such that it becomes a JS array using JSON.parse().
  2. Use an XHR to request the PHP script, and when you get a response use JSON.parse() to set it as an array variable.

The first method is outdated, but very simple - though it does require that your JS code is parsed by PHP which may or may not be possible/advisable depending on your server configuration.

The second method is probably what you should do, as long as you're fine with the array being populated after the page loads and that you wait for the XHR to complete before calling any functions that rely on the array.

The main thing to know here is that what you want to do is not possible using only JavaScript because JS cannot read the contents of a folder on the server. Your JS will need to interact with some server side code in order to read the contents of a folder into any array.

Topher Rhodes
  • 51
  • 4