Iterating over array not working for data though nested fetch using react

Question

I am obtaining data after making multiple fetch requests through chaining. I want to display the data on the page in the form of a table. But when I try to map over the object, iteration doesn't work.

useEffect(() => {
        const getResources = async() => {
            await getUserResourceId()
                .then((data) => {
                    const resourceId = data.resourceId;
                    getPersonalGroup(resourceId)
                        .then((responseData) => {
                            personalGroup = responseData.result;
                       
                 getPersonalGroupResourceId(personalGroup, 24)
                .then((resourceData) => {
                    resourceData.forEach((resourceId) => {
                        getIndividualResourceId(resourceId)
                            .then((resources) => {
                                testData.push(resources);
                                console.log('resourceData', resources);
                            });
                    });
                });
              });
          });             


 }
    getResources();
}, []);

When I display testData, the result is :

Because testData has no value initially, the mapping is not working as well. So iterating over the data and displaying part is not working. How do I store the data, once all the pending resources are fetched ? Adding await is not helping.

Brian · Accepted Answer · 2021-06-03 01:39:03Z

1

Use async/await syntax all the way through (no chaining with .then).
When looping over resourceData push each unresolved promise into an array.
Resolve them all with const newTestData = await Promise.all(arrayOfPromises);: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Update your testData stored in the component state with newTestData: setTestData(newTestData);.
When using your testData in the template, coditionally render the component that uses it {testData.length && <SomeComponent data={testData} />}.

answered Jun 3, 2021 at 1:39

Brian

5663 silver badges9 bronze badges

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

2 Comments

user2128 Over a year ago

Can you please elaborate on the 2nd point -- pushing unresolved promise into an array. How to put a check if its yet unresolved ?

Brian Over a year ago

You don't need to "check" for it, you know that a Promise is unresolved if you haven't done anything to resolve it. There are 2 ways of doing it: await and .then. Don't do either of those inside your forEach loop and just push each getIndividualResourceId(resourceId) into an array and then resolve them all at once. Understanding of how to work with Promises seems to be the crucial piece of information missing here. I'd recommend reading a few "understanding js promises" articles of which there are many.

Collectives™ on Stack Overflow

Iterating over array not working for data though nested fetch using react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related