Trapped by commitments

Question

Trapped by commitments

I am currently working with an array of projects and an array of dates. My goal is to map the dates to the projects and make API calls to retrieve report URLs. I am trying to collect an array of objects that contain the URLs and the corresponding name-date of the projects, if the data exists and I receive the URL. However, my current code is only returning an array of objects with promises...

  const getURL = async url => {
    try {
      await fetch(url, {method: 'GET', headers: headers_data})
        .then(response => response.json())
        .then(data => data.urls[0]);
    } catch (error) {
      console.log('Error getting links', error);
    }
  };

 let linksToDownload = [];
 await Promise.all(dateOfReport.map(async (date) => {
     await Promise.all(apps.map(async (appId) => {
      const API = process.env.API + appId + "&date=" + date ;
      let url = getURL(API)
      let obj = {
        name: date + "appId" + appId,
        value: url,
      }
      return linksToDownload.push(obj);
    }));
    return;
  }));

  console.log(linksToDownload);

Currently, my log displays:

[
  { name: '2020-04-29appIdda555', value: Promise { <pending> } },
  { name: '2020-04-29appIdqqq444', value: Promise { <pending> } },
  { name: '2020-04-30appIdda555', value: Promise { <pending> } },
  { name: '2020-04-30appIdqqq444', value: Promise { <pending> } }
]

I appreciate any help in resolving this issue. Thank you.

javascript promise fetch

Answer 1

Answer №1

~~Make sure to add an await in~~

let url = getData(API);

– it should be

let url = await getData(API);

You might want to restructure things like this:

// Function to fetch JSON from a URL asynchronously.
async function getJSON(url) {
  const resp = await fetch(url, { method: "GET", headers: headers_data });
  const data = await response.json();
  return data;
}

// Retrieve the first report URL for a specific app ID and date.
// NOTE: error handling needs to be implemented
async function getReportURL(appId, date) {
  const apiUrl = process.env.API + appId + "&date=" + date;
  const data = await getJSON(apiUrl);
  const url = data.urls[0];
  return {
    name: date + "appId" + appId,
    value: url,
  };
}

// Loop through date and app arrays to create an array of promises...
const linkPromises = [];
dateOfReport.forEach(date => {
  apps.forEach(appId => {
    // NB: no 'await' used here, allowing requests to run in parallel.
    linkPromises.push(getReportURL(appId, date));
  });
});

// Await all promises to receive the final outcome.
const links = await Promise.all(linkPromises);

console.log(links);

Answer 2

~~Make sure to add an await in~~

let url = getData(API);

– it should be

let url = await getData(API);

You might want to restructure things like this:

// Function to fetch JSON from a URL asynchronously.
async function getJSON(url) {
  const resp = await fetch(url, { method: "GET", headers: headers_data });
  const data = await response.json();
  return data;
}

// Retrieve the first report URL for a specific app ID and date.
// NOTE: error handling needs to be implemented
async function getReportURL(appId, date) {
  const apiUrl = process.env.API + appId + "&date=" + date;
  const data = await getJSON(apiUrl);
  const url = data.urls[0];
  return {
    name: date + "appId" + appId,
    value: url,
  };
}

// Loop through date and app arrays to create an array of promises...
const linkPromises = [];
dateOfReport.forEach(date => {
  apps.forEach(appId => {
    // NB: no 'await' used here, allowing requests to run in parallel.
    linkPromises.push(getReportURL(appId, date));
  });
});

// Await all promises to receive the final outcome.
const links = await Promise.all(linkPromises);

console.log(links);

Trapped by commitments

Answer №1

Similar questions

A Bluebird promise was generated within a NodeJS handler function, however it was not properly returned from the function

Unable to activate primary error handler in my Node.js Express application

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

Angular2 Dropdown not updating with values from API

Issue encountered with edges helper and a partly opaque object rendering

The absence of FormData.entries in submit is a limitation of the Vue framework

Switch between hiding and showing the DIV element flaw

Preventing multiple users from saving the same value for a field using ajax and C#: Best Practices

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

Tips for incorporating animation when opening a Jquery SimpleModal

Having issues with Sequelize and SQLite auto increment functionality. No errors when using AutoIncrement, but the auto increment feature is not working. On the other hand, errors arise when using

Display all event date markers, even if some dates are missing

Jquery Deferred failing to activate done or when functions

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

overlay appears as I reveal the slide-out menu

Manipulating object information within a nested for loop

Having issues with @react-three/drei in next.js environment

Guide to creating dynamic borders around your PHPexcel output

What is the reason behind getComputedStyle having visibility set to visible?

What is the reason behind classList returning 'undefined' unless getElementById is explicitly used?