How to do fetches within nested for of loops

Question

I am trying to do fetches within nested for of loops. The outer for loop writes out an jsx unordered list based on property values found in a passed in obj. If any of the properties contain an array as it's value, it calls a function (buildListFromArray) that writes out an unordered list within the parent unordered list based on the array's values. All elements of the array will contain a url that returns json with only one obj. I want to do a fetch to each url in the array to get a name property value from it so that I can display the name property of the returned obj rather than the raw url values that the property contains.

I would try to use Promises.all() using an array of promises that I would build, but I don't think that's going to make a difference. I could somehow use the property name to go back and insert the jsx with retrieved values because each property name is unique. But I will not know the property names that need a nested unordered list written out until runtime, so that won't work. Below is the code, hopefully well commented

I don't necessarily need code, I'm just looking for ideas on how to approach it. I'm stumped.

//global incrementing counter used rather than array index to set key 
attribute of list item 
//because other arrays will be built and have the same indexes 
//losing uniqueness for list item key values
let counter = 0;

const buildListFromArray = (listArray, clickFunction) => {
    const output = [];
    for (const item of listArray) {
        counter++;

        //array elements can have a url that returns json but I want to replace the raw url
        //that is displayed by fetching results from that url and displaying it's name property
        //so that users see which name or title the url goes to rather than the url itself
        if (item.includes('https://swapi.co/api/')) {
            fetch(item)
            .then((response) => response.json())
            .then((jsonObj) => {output.push(
                <li className='linkStyle' onClick={clickFunction} key={counter}>
             {jsonObj.results[0].name}
            </li>);})
            .catch((error) => {console.log(error)});
        }
        else {
        output.push(<li key={counter}>{item}</li>);
        }
    }   
    return (<ul>{output}</ul>);
};

buildListArray called from outer for in loop (minimal code)

cardJsx.push(<li key={prop}><strong>{prop}:</strong> 
{buildListFromArray(value, props.singleCard)}</li>);

Answer 1

You'll need to use React state to keep track of your fetch call result when they complete. Then, when the data is available in state, you can use it to render something. Your initial idea to use something like Promise.all() is on the right track, you just need the extra step of updating state and re-rendering the component when needed.

This pattern is so common that it even has an entry in the official FAQ of the React docs, and you should probably go read it ;)

Something kiiinda like this (obviously not 100% right because I don't know the rest of your code):

// Note it's now "fetchListFromArray" instead of "build"
// Also note that it needs to be a member function of the class
// so that we can call it with this.fetchListFromArray()
this.fetchListFromArray = (listArray) => {
    // An array of the fetch calls, so we can Promise.all() it later
    const fetches = [];
    for (const item of listArray) {
        if (item.includes('https://swapi.co/api/')) {
            // Here we can push our fetch into the array.
            // Note that the fetch will just resolve to the JSON result
            fetches.push(
                fetch(item)
                .then((response) => response.json());
        }
        else {
            // This will just ensure that our fetch array contains all promises,
            // even for items that don't actually need a fetch
            fetches.push(Promise.resolve(item);
        }
    }

    // Promise.all() will wait for all fetches and then resolve with
    // an array containing all the resulting values. Neat!
    Promise.all(fetches).then(result => {
        // We can store the result in state. This will get updated asynchronously!
        this.setState({fetchResult: result});
    })
};

Now, instead of calling fetchListFromArray() in render() (which will break because it has a setState() call in it which you can not do in render) you would do it probably in componentDidMount() so that the initial fetch is triggered when the component first loads:

componentDidMount() {
    // Not sure where the listArray comes from, maybe props??
    this.fetchListFromArray(this.props.listArray);
}

Now somewhere in render() you can do something with the data you've stored in state to do some kind of dynamic JSX render:

render() {
    return (
        <ul>
            {Array.isArray(this.state.fetchResult && this.state.fetchResult.map((ea, i) => {
                // render some kind of JSX. This is just an example...
                <li key={i}>{ea.name}</li>
            })}
        </ul>
    );
}