Build A Pokemon Search Project - How To Find Data

JavaScript
1

Hello

I am having trouble figuring out what I am supposed to do with the API, I looked elsewhere for how I am supposed to use fetch() and parse the data into a JSON file. From here, I am not sure how to access said data. When I try to put in a specific Pokemon URL for the fetch, the console will say [Function: json] and gives no further details. Am I doing this correctly? How would I go about displaying the information I need?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <form>
        <input id="search-input" required></input>
        <button id="search-button">Search</button>
      </form>
      <img></img>
      <h3 id="pokemon-id"></h3>
      <h3 id="pokemon-name"></h3>
      <p id="weight"></p>
      <p id="height"></p>
      <p id="types"></p>
    </main>
    <script src="script.js"></script>
  </body>
</html>

CSS:

body {
  background-color: #232323;
}

main {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #111111;
  border-radius: 30px;
  max-width: 40em
}

form {
  margin: 30px 0;
}

#search-input {
  width: 250px;
  text-align: center;
  border-radius: 20px;
  height: 40px;
}

#search-button {
  width: 100px;
  border-radius: 20px;
  height: 40px;
}

JS:

const searchInput = document.getElementById("search-input")
const searchButton = document.getElementById("search-button")

const searchCalculation = () => {

  let pokemonData

  fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon`)
    .then((res) => res.json)
    .then((data) => {
      console.log(data)
    })
    .catch((err) => {
      alert("Pokémon not found")
    })
}

searchButton.addEventListener("click", searchCalculation)
2

Hi @Sprigazalea

Your code is outputting a console.log on data.

At the moment, anything you enter into the search-input element will not have any effect on the searchCalculation function.

Try looking at the API directly to see how the data is structured.

Then find a way to match the search input with the data.

Happy coding

3

as your output say, .json is a function, have you tried calling it so you get its output instead?

4

I initially did this, I wanted to try getting a specific Pokemon. But when that attempt failed, I tried calling the API endpoint that has all the Pokemon, with the same result. Below is my current attempt trying to find a specific Pokemon with the API.

const searchInput = document.getElementById("search-input")
const searchButton = document.getElementById("search-button")

const searchCalculation = () => {

  let pokemonData

  fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput}`)
    .then((res) => res.json)
    .then((data) => {
      console.log(data)
    })
    .catch((err) => {
      alert("Pokémon not found")
    })
}

searchButton.addEventListener("click", searchCalculation)
5

When I try console.log on only the res.json, it also gives me the same [Function: json] message. When I try using the console.log on both res.json and data, res.json gives the [Function: json] while the data gives an undefined. I am not sure why

6

Hi @Sprigazalea

As @ILM mentioned earlier…

is the part that is causing the error message. If you need some guidance, revisit the fCC Authors Page project.

Happy coding

1 Like
7

I am still having some issues calling this data. the .catch error is shown when I try putting in the Pokemon in the search bar. I am not certain why.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <form>
        <input id="search-input" required></input>
        <button id="search-button">Search</button>
      </form>
      <img></img>
      <h3 id="pokemon-id"></h3>
      <h3 id="pokemon-name"></h3>
      <p id="weight"></p>
      <p id="height"></p>
      <p id="types"></p>
      <p id="hp"></p>
      <p id="attack"></p>
      <p id="defense"></p>
      <p id="special-attack"></p>
      <p id="special-defense"></p>
      <p id="speed"></p>
    </main>
    <script src="script.js"></script>
  </body>
</html>

CSS:

body {
  background-color: #232323;
}

main {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #111111;
  border-radius: 30px;
  max-width: 40em
}

form {
  margin: 30px 0;
}

#search-input {
  width: 250px;
  text-align: center;
  border-radius: 20px;
  height: 40px;
}

#search-button {
  width: 100px;
  border-radius: 20px;
  height: 40px;
}

JS:

const searchInput = document.getElementById("search-input")
const searchButton = document.getElementById("search-button")

let pokemonData

const searchCalculation = () => {

  fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput.value}`)
    .then((res) => res.json())
    .then((data) => {
      pokemonData = data;
      displayInfo(pokemonData);
    })
    .catch((err) => {
      alert("Pokémon not found")
    })
}

const displayInfo = (pokemonInfo) => {
  pokemonInfo.forEach(({ base_experience, height, id, name, order, sprites, stats, types, weight}) => {

    const heightText = document.getElementById("height");
    const idText = document.getElementById("id");
    const nameText = document.getElementById("name");

    heightText.textContent = `${height}`;
    idText.textContent = `${id}`;
    nameText.textContent = `${name}`

  })
}

searchButton.addEventListener("click", searchCalculation)
8

Log out the error in the catch (always log out the catch error)

  1. The Pokémon name should be lowercase when fetching.
  2. Your displayInfo function is throwing errors that are caught by the catch.
1 Like