Async Function Cannot Access an Array of Objects Updated by Another ASYNC Function

JavaScript
1

I have two ASYNC functions as follows:

let prodIDs = [];
createTable();
displayProdTable();

async function createTable(){
  const IDs = await axios.get('MyURL');
  for(let i=0; i<IDs.length; i++){
    prodIDs.push({id:IDs.data[i].id, model:IDs.data[i].model})
  }
}

async function displayProdTable(){
  let table = document.createElement('table');        
  table.setAttribute('id', 'prod-table');
  let tr = document.createElement('tr');   
  for(let i = 0; i<prodIDs.length; i++){
   let td = document.createElement('td'); 
    td.innerText = prodIDs[i].id;
    tr.append(td);
  }
 table.append(tr)
 document.body.append(table);
}

The issue I have is that prodIDs is null inside of the createTable function. Upon debugging I can see that there is a small blue square icon with the letter i inside of it next to the prodIDs array. I think it means that my array is empty. I’ve read that this issue is due to the array not being ready to be accessed yet when I attempted to access it and that I need to use a promise or an async/await function to resolve it. I am using async and await functions to fill the prodIDs array data and to read its data but for some reason I’m still getting this issue. Please help explain where I went wrong.

1 Like
2

You just threw in the words async and await without understanding what they actually mean.

An async function is a function that does not block while waiting for something to complete. Instead it lets the rest of the code continue working. await within an async function represents the breakpoints within that function. When an await is hit, the function will pause there and the code execution goes back to where the async function was called. When progress is made, the function will resume from that await point.

So your createTable function runs up to your await line, which fires off the network request. It then effectively returns and your code continues running, executing the displayProdTable function. Since that function never await’s anything, there’s no point in marking it async. It will just run through to completion as any normal function would. At this point though, prodIDs is still an empty array though as your createTable function is still awaiting on the network request to complete before it can take the results and fill your array.

The simplest fix is to just move your call to displayProdTable inside your createTable function.

let prodIDs = [];
createTable();

async function createTable(){
  const IDs = await axios.get('MyURL');
  for(let i=0; i<IDs.length; i++){
    prodIDs.push({id:IDs.data[i].id, model:IDs.data[i].model})
  }
  displayProdTable();
}

You should also spend some time reading up on async, await, and asynchronous code execution to learn more about these features and how to use them properly.

3

Hi thanks for replying. I thought about moving displayProdTable to inside the createTable function but I decided against it. I thought that if I could just put the code of displayProdTable inside an async function then it would work.