Pokemon Search App

JavaScript
1

Hello everyone, i’m stucked here one whole day. Trying to call 2 fetch in one async function. Then I need second fetch to wait for one part of code to be done. Does anyone know how shoud I set await to do that?

After user type number or name of pokemon in input , I’m trying to get url of pokemon trought for loop. Second fetch should wait for all of that to be done first.

`<html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico">
    <title>Pokémon Search App</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1>Pokémon Search App</h1>
      <div class="container">
        <form role="search" id="search-form">
          <label for="search-input">Search for Pokémon Name or ID:</label>
          <input type="text" name="pokemon" id="search-input" required="">
          <button id="search-button">Search</button>
        </form>
        <div class="output">
          <div class="top-container">
            <div class="name-and-id">
              <span id="pokemon-name"></span>
              <span id="pokemon-id"></span>
            </div>
            <div class="size">
              <span id="weight"></span>
              <span id="height"></span>
            </div>
            <div id="sprite-container" class="sprite-container"></div>
            <div id="types"></div>
          </div>
          <div class="bottom-container">
            <table>
              <tbody><tr>
                <th>Base</th>
                <th>Stats</th>
              </tr>
              <tr>
                <td>HP:</td>
                <td id="hp"></td>
              </tr>
              <tr>
                <td>Attack:</td>
                <td id="attack"></td>
              </tr>
              <tr>
                <td>Defense:</td>
                <td id="defense"></td>
              </tr>
              <tr>
                <td>Sp. Attack:</td>
                <td id="special-attack"></td>
              </tr>
              <tr>
                <td>Sp. Defense:</td>
                <td id="special-defense"></td>
              </tr>
              <tr>
                <td>Speed:</td>
                <td id="speed" class="speed"></td>
              </tr>
            </tbody></table>
          </div>
        </div>
      </div>
      <script src="./script.js"></script>
    </main>
  

</body></html>`

const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
const hp = document.getElementById("hp");
const attack =document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");

const pokemonList = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";

const pokemonListData = async () => {
  try {
    const res = await fetch(pokemonList); //1st fetch
    const data = await res.json();

   let pokemon = []
   
    for (let i = 0; i < data.results.length ; i++){
      if (searchInput.value === data.results[i].name || searchInput.value === data.results[i].id.toString()){
      pokemon.push(data.results[i])
      } 
    }
    let pokemonUrl = (pokemon[0].url);

    

    const response = await fetch(pokemonUrl); // 2nd fetch
    const pokemonData = await response.json();
    console.log(pokemonData);
  
   
  } catch (err) {
    console.log(err);
  }
};


searchButton.addEventListener("click", () => {
  pokemonListData();
})
2

Here’s what I personally recommend. When the user first loads the app, then you should pre-fetch all the Pokemon and store that data in your app as it is unlikely to change. You should focus on storing the name and the url.

Then when the user searches for a Pokemon, you should see if the name given is in your pre-fetched Pokemon list. If so then you can do your second fetch. If not, give the correct not found output.

A reference that might help: Window: load event - Web APIs | MDN

Let me know if you need any further assistance. Happy coding. :slight_smile:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.