Rest of function is firing before value is resolved, async / await [closed]

As title says, I am trying (and failing) to make the for loop wait until data is resolved before the loop is fired, unfortuntely I’m stuck!

function getPots() {

    fetch(`${uri}/postpot`)
        .then(response => response.json())
        .then(data => {
         return data;
     })
        .catch(error => console.error('Unable to get items.', error));
}

async function displayPots() {

    const potLists = document.getElementsByClassName("potLists");

    var data = await getPots();

   //for loop goes here
}