The FOR OF Loop through my API response data does not display any result. (my local attempt works)

Question

It's my first time working with an API. I've pasted my code below with some comments on what I'm trying to achieve with it, and whether my little tests along the way work or fail.

The first part is what I'm supposed to make. The second half is a test that I implemented to see whether it's my loop+display logic that is wonky. It doesn't seem to be the issue. My working theory is that I'm failing the 'hand over' the data that I've fetched at some point.

Can you spot where I did something wrong or forgot something?

async function getCatalog() {
  //storing response
  let response = await fetch(apiURL); // stars a GET request (default)
  // Storing data in form of JSON
  const catalog = await response.json();
  console.log(catalog, typeof catalog); // TESTS: these work. I recieve the expected information
  if (response) {
    //return catalog; // I'm not sure if I need this or not to make displayCatalog work.
    displayCatalog();
  }
}
//calling async function
getCatalog();

//TEST
document.getElementById('items').style.border = '1px dashed blue';
// this is the target element in my HTML where I want to display my results. I gave it a border to be able to see it while I work.

// function to define innerHTML
function displayCatalog() {
  //Here I am trying to loop through the objects in my response to display some of the information. Before I focus on displaying the right info correctly, I'm trying to display ANY of it.

  for (let item of catalog) {
    let newDiv = document.createElement('div');
    let newContent = `Hello I'm ${item.name}`;
    newDiv.innerHTML = newContent;
    newDiv.style.border = '2px dashed red';
    document.getElementById('items').appendChild(newDiv);
  }
}

// NO API TEST
// Here I created an array with a few objects in it to loop through it and see if my logic is sound there. It does work. It displays what I expect it to.

let objArray = [
  {
    name: 'Dean',
    species: 'Human(ish)',
    eyecolor: 'Green',
    car: 'Baby, duh',
  },
  {
    name: 'Sam',
    species: 'Human',
    eyecolor: 'Hazel',
    status: 'Alive',
    car: 'green',
  },
  {
    name: 'Castiel',
    species: 'Human(ish)',
    eyecolor: 'Blue',
    bonded: 'yes',
    car: 'black',
  },
];

let attempt;
for (let item of objArray) {
  let Bap = document.createElement('div');
  attempt = `Hi, my name is ${item.name}, my car is ${item.car}.`;
  Bap.innerHTML = attempt;
  Bap.style.border = '1px dashed green';
  document.getElementById('items').appendChild(Bap);
}```

Answer 1

I believe catalog is a local variable of the getCatalog function, and therefore cannot be used within the displayCatalog function.

You can pass it in as an argument when calling the function:

async function getCatalog() {
...
  if (response) {
    displayCatalog(catalog);
  }
}
function displayCatalog(catalog) {
...
//the variable catalog is now accessible
}

Alternatively, if you called the parameter catalog something else in the function definition for displayCatalog() such as function displayCatalog(info) it would now be accessible as the local variable info.

Note that returning catalog from getCatalog would terminate that function.