Node.js: Unable to return new array from array.map()

Question

I am using a package called Okrabyte to extract words from each image file in a folder. The result should be a new array containing the extracted text that I can use in other functions.

When I run this:

var fs = require("fs");
var okrabyte = require("okrabyte");


fs.readdir("imgs/", function(err, files){
  files.map((file)=>{
    okrabyte.decodeBuffer(fs.readFileSync("imgs/"+ file), (err, data)=>{
      let splitWords = data.split(" ");
      let word = splitWords[0].substr(1);
      console.log(word);
    })
  })
})

the console logs each word. To return an array with those words I've tried the following:

async function words() {
    await fs.readdir("imgs/", function (err, files) {
        return files.map(async (file) => {
            await okrabyte.decodeBuffer(fs.readFileSync("imgs/" + file), async (err, data) => {
                let splitWords = data.split(" ");
                let word = splitWords[0].substr(1);
                return word
            })
        })
    })
}

var testing = await words();

console.log(testing);

This gives undefined I've tried turning everything into a promise, I've tried async-await, I've tried pushing each word into a new array and returning that array in closure but nothing works - what am I doing wrong??

Answer 1

You should not be using async-await that way. That should be used when you are dealing with promises. The library okrabyte uses the concept of callbacks.

I suggest you follow this approach:

(1) Enclose the okrabyte.decodeBuffer part in a function that returns a promise that resolves in the callback.

(2) Use files.map to generate an array of promises calling the function you defined in (1)

(3) Use Promise.all to wait for all promises to execute and finish before moving on to dealing with all the words.

Walkthrough:

Part 1

const processWord = (file) => {
  return new Promise((resolve, reject) => {
    okrabyte.decodeBuffer(fs.readFileSync("imgs/"+ file), (err, data)=>{
      if (err) {
        reject(err); // <--- reject the promise if there was an error
        return;
      }

      let splitWords = data.split(" ");
      let word = splitWords[0].substr(1);
      resolve(word); // <--- resolve the promise with the word
    })
  });
}

You make a function that wraps the decoding part into a promise that eventually resolves with the word (or is rejected with an error).

Part 2

const promises = files.map((file)=>{
  return processWord(file);
})

The above will generate an array of promises.

Part 3

fs.readdir("imgs/", function(err, files){
  const promises = files.map((file)=>{
    return processWord(file);
  })

  Promise.all(promises)
    .then(responses => {
      // responses holds a list of words
      // You will get each word accessing responses[0], responses[1], responses[2], ...
      console.log(responses);
    })
    .catch(error => {
      console.log(error); // Deal with the error in some way
    });
})

The above uses Promise.all to wait for all promises to resolve before going to the then() block, assuming no errors occurred.

You can further isolate the construct above in a method that will return a promise with a list of all the words, much in the same fashion that was done in the processWord function from Part 1. That way, you can finally use async-await if you wish, instead of handling things in the then() block:

const processEverything = () => {
  return new Promise((resolve, reject) => {

    fs.readdir("imgs/", function(err, files){
      const promises = files.map((file)=>{
        return processWord(file);
      })

      Promise.all(promises)
        .then(responses => {
          resolve(responses);
        })
        .catch(error => {
          reject(error);
        });
    })
  });
};

const words = await processEverything();
console.log(words);

Answer 2

You're returning word value to the enclosed function but not map() function.

Hope this code help you.

async function words() {
    global.words = [];
    await fs.readdir("imgs/", function(err, files){
      return files.map( async(file)=>{
        await okrabyte.decodeBuffer(fs.readFileSync("imgs/"+ file), async (err, data)=>{
          let splitWords = data.split(" ");
          let word = splitWords[0].substr(1);
          global.words.push(word);
        })
      })
    })
  }

  var testing = await words();
  testing = global.words;
  console.log(testing);

Answer 3

If your map function is async then it's returning a promise, so your mapped array is in fact an array of promises. But you can then use a Promise.all to get the resolved values of that array.

Additionally, you're trying to await the call to fs.readdir and okrabyte.decodeBuffer, which both accept a callback and do not return a promise. So if you want to use a promise there you'll have to wrap them in a promise constructor manually.

Here's how I would do it:

async function words() {
    // Wrap `fs` call into a promise, so we can await it:
    const files = await new Promise((resolve, reject) => {
        fs.readdir("imgs/", (err, files) => { err ? reject(err) : resolve(files); });
    });

    // Since map function returns a promise, we wrap into a Promise.all:
    const mapped = await Promise.all(files.map((file) => {
        // Wrap okrabyte.decodeBuffer into promise, and return it:
        return new Promise((resolve, reject) => {
            okrabyte.decodeBuffer(fs.readFileSync("imgs/" + file), (err, data) => {
                if (err) return reject(err);
                const splitWords = data.split(" ");
                const word = splitWords[0].substr(1);
                resolve(word);
            })
        })
    }))

    // Mapped is now an array containing each "word".
    return mapped;
}

var testing = await words();

// Should now log your array of words correctly.
console.log(testing);