I am facing problem chaining the async code in Javascript

Question

I am trying to execute allCountryData and return a promise its working fine but after allCountryData is done executing I want to perform a operation on that returned data / or allCountryDataArray and store the highest values in arrayOfHighestCases

Note I can't chain the other login in allCountryData.

Please help let me know if you need any more details


export const allCountryDataArray = [];
export const arrayOfHighestCases = [];

const allCountryData = async () => {
  sendHTTP()
    .then((res) => {
      return res.response;
    })
    .then((res) => {
      allCountryDataArray.push(...res);
      return allCountryDataArray;
    });
  return await allCountryDataArray;

  // Highest Cases
};

The code is below is not working


const highestCasesData = async () => {
  // const allCountryDataArrayy = await allCountryData();
  // allCountryData()
  // .then((data) => {
  //   console.log(arrayOfHighestCases[0]);
  // })
  // .then((res) => {
  const np = new Promise((res, rej) => {
    res(allCountryData());
  });

  return np.then((res) => {
    console.log(res);
    const arrayofHigh = allCountryDataArray.sort((a, b) => {
      if (a.cases.total < b.cases.total) {
        return 1;
      } else if (a.cases.total > b.cases.total) {
        return -1;
      } else {
        return 0;
      }
    });
    console.log(arrayofHigh);
    const slicedArray = arrayofHigh.slice(0, 6);
    for (const eachHighCase of slicedArray) {
      arrayOfHighestCases.push(eachHighCase);
    }
    console.log(arrayOfHighestCases);
    return arrayOfHighestCases;
  });

  // });
};
highestCasesData();

return await allCountryDataArray doesn’t make sense: allCountryDataArray isn’t a Promise. The promise chain starting with sendHTTP is discarded and the return executes before sendHTTP et al. are finished. Did you mean return sendHTTP(…)…? — Sebastian Simon
– Sebastian Simon, Commented May 8, 2021 at 11:40
Your np is also nonsense, if fixed, allCountryData() returns a Promise, so wrapping it in one is not necessary. There's also no need to await something in a function that you're passing to .then(), just return the Promise. — user5734311
– user5734311, Commented May 8, 2021 at 11:44
Got it I removed the np and returned sendHTTP it working now Thank you so much for helping — Code Centrix
– Code Centrix, Commented May 8, 2021 at 11:46

Thomas · Accepted Answer · 2021-05-14 06:55:20Z

2

Filling global arrays with async data is a way into timing conflicts. Bugs where the data ain't there, except when you look it is there and yet another question here on my SO about "Why can't my code access data? When I check in the console everything looks fine, but my code ain't working."

If you want to store something, store Promises of these arrays or memoize the functions.

const allCountryData = async () => {
  const res = await sendHTTP();
  return res.response;
};

const highestCasesData = async () => {
  const allCountryDataArray = await allCountryData();

  return allCountryDataArray
    .slice()  // make a copy, don't mutate the original array
    .sort((a, b) => b.cases.total - a.cases.total)  // sort it by total cases DESC
    .slice(0, 6); // take the first 6 items with the highest total cases
}

edited May 14, 2021 at 6:55

answered May 8, 2021 at 13:01

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Code Centrix · Accepted Answer · 2021-05-08 11:50:29Z

0

This is working please let me know if I can make some more improvements

const allCountryData = async () => {
  return sendHTTP()
    .then((res) => {
      return res.response;
    })
    .then((res) => {
      allCountryDataArray.push(...res);
      return allCountryDataArray;
    });

  // Highest Cases
};

const highestCasesData = async () => {

  return allCountryData().then((res) => {
    console.log(res);
    const arrayofHigh = allCountryDataArray.sort((a, b) => {
      if (a.cases.total < b.cases.total) {
        return 1;
      } else if (a.cases.total > b.cases.total) {
        return -1;
      } else {
        return 0;
      }
    });
    console.log(arrayofHigh);
    const slicedArray = arrayofHigh.slice(0, 6);
    for (const eachHighCase of slicedArray) {
      arrayOfHighestCases.push(eachHighCase);
    }
    console.log(arrayOfHighestCases);
    return arrayOfHighestCases;
  });

};
highestCasesData();

answered May 8, 2021 at 11:50

Code Centrix

398 bronze badges

1 Comment

Bergi Over a year ago

Use async only when you use await instead of then

Collectives™ on Stack Overflow

I am facing problem chaining the async code in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related