Unresolved Promise in Database API Integration

Other Questions Airtable
1

Hey everyone! I’m stuck with a database API in my Node.js project. I’ve got two tables: one for advisors and another for positions. I’m trying to get the position name for each advisor using a search function. But when I try to send the data to my view, I keep getting a ‘Promise Pending’ error. Here’s a simplified version of my code:

router.get('/', async (req, res) => {
  const pageTitle = 'Advisor List';

  const fetchAdvisors = async () => {
    const advisors = await advisorTable
      .select({ limit: 5, view: 'Main View' })
      .eachPage((advisors, getMore) => {
        advisors.forEach(advisor => {
          positionTable.find(advisor.fields['CurrentRole'], (error, result) => {
            if (error) {
              console.error('Oops!', error);
              return;
            }
            advisor.fields.position = result.fields.PositionName;
            return advisor;
          });
        });
        getMore();
      });
  };

  try {
    const advisorData = await fetchAdvisors();
    console.log(advisorData);
    res.render('advisorList', { pageTitle, advisorData });
  } catch (error) {
    console.error(error);
    res.status(500).send('Something went wrong');
  }
});

Can anyone help me figure out why I’m getting this Promise issue? Thanks!

2

I’ve run into a similar situation before, and the main issue was with the asynchronous callbacks that don’t wait for all the data, which leads to the Promise remaining unresolved. From my experience, wrapping your advisor lookups in promises and then using Promise.all to wait for all the asynchronous calls to complete is essential. Instead of using a forEach loop with individual callbacks, returning a promise from your fetch function helps ensure that you only proceed once all the data is ready. A refactored version using async/await might look like this:

const fetchAdvisors = () => {
  return new Promise((resolve, reject) => {
    let allAdvisors = [];
    advisorTable.select({ limit: 5, view: 'Main View' })
      .eachPage(async (advisors, fetchNextPage) => {
        const advisorPromises = advisors.map(async (advisor) => {
          const position = await positionTable.find(advisor.fields['CurrentRole']);
          advisor.fields.position = position.fields.PositionName;
          return advisor;
        });
        allAdvisors = allAdvisors.concat(await Promise.all(advisorPromises));
        fetchNextPage();
      }, (err) => {
        if (err) reject(err);
        else resolve(allAdvisors);
      });
  });
};

This approach ensures that all asynchronous operations complete before you try to render your view, which should resolve the ‘Promise Pending’ error you’re encountering.

3

I’ve run into similar issues before. The heart of the problem is that your fetchAdvisors function does not wait for the asynchronous positionTable.find calls to complete before returning, which leaves your promise unresolved. One effective solution is to modify fetchAdvisors so that it returns a promise that only resolves once all position lookups are finished. Wrapping each lookup in a promise and using Promise.all ensures that you collect all the updated advisors before proceeding. For example:

const fetchAdvisors = () => {
  return new Promise((resolve, reject) => {
    let allAdvisors = [];
    advisorTable.select({ limit: 5, view: 'Main View' })
      .eachPage((advisors, fetchNextPage) => {
        const advisorPromises = advisors.map(advisor => 
          new Promise(resolve => {
            positionTable.find(advisor.fields['CurrentRole'], (error, result) => {
              if (error) {
                console.error('Error:', error);
                resolve(advisor);
              } else {
                advisor.fields.position = result.fields.PositionName;
                resolve(advisor);
              }
            });
          })
        );
        Promise.all(advisorPromises).then(updatedAdvisors => {
          allAdvisors = allAdvisors.concat(updatedAdvisors);
          fetchNextPage();
        });
      }, err => {
        if (err) reject(err);
        else resolve(allAdvisors);
      });
  });
};

This approach should resolve the ‘Promise Pending’ error by ensuring that all asynchronous operations complete before the data is used to render your view.

4

hey jess, looks like ur issue is with the async nature of the positionTable.find() callback. try using Promise.all() to wait for all position lookups to complete before returning the advisors. also, make sure fetchAdvisors() actually returns the advisors array. hope this helps!