LaVOZs

The World’s Largest Online Community for Developers

'; javascript - How to get array from getPhotos() function to the callback function or how to get deep directory structure using fs - LavOzs.Com

I'm trying to gather the gallery folders and images that are listed on my server, but am having a difficult time getting the photos array to return with the results. Can someone help me understand what I'm doing wrong that it won't send the data back?

My code:

    module.exports.getGalleryImages = function(req, res) {
  console.log('Fetch gallery image names');
  var gallerypath = './public/assets/gallery';
  function done(err, results) {
    if (err) {
      res.status(500).json(err);
    } else {
      res.status(200).json(results);
    }
  }
  getGalleryFolders(gallerypath, done);
};

var getGalleryFolders = function(gallerypath, callback) {
  const galleryFolders = [];
  fs.readdir(gallerypath, async (err, files) => {
    if (err) {
      console.log('error: ', err);
      callback(err);
    }
    files.forEach(file => {
      let folder = { year: null, photos: [] };

      folder = { year: file, photos: [file.files] };
      galleryFolders.push(folder);
    });
    console.log(galleryFolders);
    callback(null, galleryFolders);
    // getPhotos(galleryFolders, gallerypath, callback);
  });
};

var getPhotos = function(galleryFolders, gallerypath, callback) {
  const gallery = [...galleryFolders];
  gallery.forEach(folder => {
    let subfolder = `${gallerypath}/${folder.year}`;
    fs.readdir(subfolder, (err, photos) => {
      if (err) {
        console.log('error: ', err);
        callback(err);
      }
      folder.photos = photos;
      console.log(
        `Returning folder ${folder.year} photos`,
        folder.photos.length
      );
      return folder;
      // console.log(folder);
    });
    gallery.push(folder);
    console.log('returning gallery', gallery);

    return gallery;
  });

  console.log(gallery);
  callback(null, gallery);
};

It gets the correct folders in the getGalleryFolders() function and passes them to the next function getPhotos(). The photos array is right, it just doesn't seem to want to leave that function no matter what or where I've moved return.

I'm getting a result of:

[ { "year": "2004", "photos": [ null ] }, { "year": "2011", "photos": [ null ] }, { "year": "2012", "photos": [ null ] }, { "year": "2013", "photos": [ null ] }, { "year": "2014", "photos": [ null ] } ]

I want to return something like this:

[ { "year": "2004", "photos": [ "1.jpg","3.jpg","somatic.jpg" ] }, { "year": "2011", "photos": [ "blue.jpg","green.jpg",yellow.jpg" ] }, { "year": "2012", "photos": [ "a.jpg","b.jpg","c.jpg" ] }, { "year": "2013", "photos": [ "2013.jpg" ] }, { "year": "2014", "photos": [ "2014.jpg" ] } ]

fs.readdir will get you the names of all the files in a directory. It does not get you the files.

You can see this when you create the objects in your array:

folder = { year: file, photos: [file.files] }

Where the property 'year' gets set to a string (2004, 2011, etc), which must be the names of the files in that directory. This is also why your photos array is always null. The string stored in the 'file' variable doesn't have any properties, because it's a string and not an object. When you try to access file.files, that 'files' property doesn't exist.

To get the contents of the files, you'll need to call something like fs.readFile with all the filenames you've gotten with readdir.

https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback

Related
How do I remove a property from a JavaScript object?
How do you get a timestamp in JavaScript?
How do I check if an array includes a value in JavaScript?
How to get the children of the $(this) selector?
How to append something to an array?
How to insert an item into an array at a specific index (JavaScript)?
How do I empty an array in JavaScript?
How to check if an object is an array?
How do I remove a particular element from an array in JavaScript?
How do I return the response from an asynchronous call?