How can I make sure my arrays have been updated when looping through them? [duplicate]

I’m running two Axios GET requests. After the first GET finishes, I loop through the response to simplify each returned object so it only contains what I need (data[i] within the first loop, below). From there I run a second GET to retrieve child data from the individual objects that I can’t access without another request, accessed by the “key” value (query2).

I then run a second loop to attach all the children objects retrieved from the second response and attach them iteratively to the parent object (data[i]).

The problem I’m having is that often (not always) the second loop throws a

TypeError: Cannot read properties of undefined (reading ‘episodes’)
at newAdditionCheck (…botplexTV.js:89:26)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)

error at the data[i].episodes.push(data2[j]) point. When I log the different objects within the loop they exist as they should, so my only guess is some of the loops are finishing before others, but any input or fixes would be greatly appreciated. Thank you!

let baseURL1 = `http://${plexKeys.hostname}:${plexKeys.port}`;
let baseURL2 = `/?X-Plex-Token=${plexKeys.token}`;

const response = await axios({
  method: "GET",
  url: `${baseURL1}${query}${baseURL2}`,
});
let data = response.data.MediaContainer.Metadata;
for (i = 0; i < data.length; i++) {
  data[i] = {
    name: data[i].parentTitle,
    key: data[i].queryToken,
    episodes: [],
  };
  query2 = data[i].key;
  const response2 = await axios({
    method: "GET",
    url: `${baseURL1}${query2}${baseURL2}`,
  });
  let data2 = response2.data.MediaContainer.Metadata;
  for (let j in data2) {
    data2[j] = {
      series: data2[j].grandparentTitle,
      season: data2[j].parentTitle,
    };
    data[i].episodes.push(data2[j]);
  }
  continue;
}