How to use my API data I gathered through a GET request into a separate function

I am tasked with fetching data from an API and storing that data on a card for the game jeopardy I am creating. I am able to successfully fetch my data question from my api but am having a hard time of implementing it into my card. I am trying to access the variable 'res' in my addGenre() function so that I can assign the cards the questions.

const game = document.querySelector("#game");
const scoreDisplay = document.getElementById("score");

// ("https://opentdb.com/api.php?amount=10&category=11&difficulty=easy&type=boolean");

const film = 11;
const levels = ["easy", "medium", "hard"];

function addGenre() {
  const column = document.createElement("div");
  column.classList.add("genre-column");
  column.innerText = "This is a genre";
  game.append(column);
  levels.forEach((lev) => {
    const card = document.createElement("div");
    card.classList.add("card");
    column.append(card);
    getEasy();
  });
}

const getEasy = async function (level) {
  const res = await axios.get(
    `https://opentdb.com/api.php?amount=10&category=11&difficulty=${level}`
  );
  console.log(res);
  return res;
};

addGenre();

body{
    margin: 0;
    padding: 0;
    background-color: dodgerblue;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



.genre-column{
    display: flex;
    flex-direction: column;
    text-align: center;

}

.card{
    width: 200px;
    height: 120px;
    border-radius: 20px;
    background-color: blue;
    text-align: center;
    padding: 5px;
    margin: 10px;
    border: 3px solid yellow;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Jeopardy</title>
  <link href="https://fonts.googleapis.com/css?family=Copse&display=swap"
        rel="stylesheet">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>

<h1>Let's Play!</h1>
<div id="game">


</div>
<h2>Score : <span id="score">0</span></h2>

<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://unpkg.com/lodash"></script>
<script src="app.js"></script>

</body>
</html>

Solution

You can invoke the getEasy method from inside the addGenre method. If you want to preserve the order you can do the following:

async function addGenre() {
  // other code removed for brevity

  // Make a request for every level and save it in the "requests" array
  const requests = levels.map((lev) => getEasy(lev));

  // Wait for all of the requests to finish. We will have a list of "responses" from the API
  const responses = await Promise.all(requests);

  // For each response, create a card an append it to the DOM
  responses.forEach((res) => {
    const card = document.createElement("div");
    card.classList.add("card");
    column.append(card);
    // add whatever else you want to the card here
  });
}