I am fetching an API and attempting to display it on my HTML page. I am decently sure that I have fetched it correctly with this code:

const fetchAllPlayers = async () => {
  try {
    const result = await fetch(API_URL);
    const response = await result.json();
    console.log(response);

    return response;

  } catch (err) {
    console.error("Uh oh, trouble fetching players!", err);
  }
};

The console log prints out the information I like. What I am struggling with is displaying it.

const renderAllPlayers = (playerList) => {
  const wrapper = document.getElementById("wrapper");

  response.forEach(player => {
    const card = document.createElement('div');
    card.classList.add('card');

    const nameEle = document.createElement('h1');
    nameEle.textContent = player.name;

    card.appendChild(nameEle);
    wrapper.appendChild(card);
  });
}

This is my attempt at rendering the API, but for some reason, it is not rendering. I have tried multiple ways and this makes sense to me, but I have no idea why it’s not completing.

I’m sorry if this is really simple, I am quite new to this. Any help is appreciated!

EDIT: I am required to use the “playerList” variable I just don’t know how to use it…