I am making an api call, and I understand that I need to use asynchronous functions to wait on the call results before I can work with them. However, I can't get the array to fill properly even though it is in an asynchronous function. I am sure there is something obvious that I'm missing, maybe my logic to populate the array isn't in the right place?

Here is my code:

var data;
const getEvent = async() => {
  const res = await fetch(apiCall, requestOptions)
  const res2 = res.json();
  return res2
}

data = async() => {
  const temp = await getEvent()
  for (let i = 0; i < temp._embedded.events.length; i++) {
    eventlist.push(temp._embedded.events[i]);
  }
}

data()

console.log(eventlist)
console.log(eventlist[1].name)

Obviously before this I build out the apiCall and requestOptions variables so they call the api properly.

The console comes out looking something like this. The array is partially populated but should have 10 event items, not just one. I can't access any of the elements within the array.

Any help would be greatly appreciated!