Build a Pokémon Search App

Hello. I’m about to complete the JS algorithms and data structures certifications, except I’m stuck on stories 17 and 20.

<!DOCTYPE html>
  <html lang="en">
    <link rel="stylesheet" href="./styles.css"/>
    <body>
      <h1>Pokémon Search App</h1>
      <input id="search-input" placeholder="search by Pokémon name or id" required></input>
      <button id="search-button">Search!</button> 
      <p id="img-container"></p>
      <div>Name:</div><div class="stat-container" id="pokemon-name"></div>
      <div>Pokémon ID:</div><div class="stat-container" id="pokemon-id"></div>
      <div>Weight:</div><div class="stat-container" id="weight"></div>
      <div>Height:</div><div class="stat-container" id="height"></div>
      <div>Types:</div><div class="stat-container" id="types"></div>
      <div>Health:</div><div class="stat-container" id="hp"></div>
      <div>Attack dmg:</div><div class="stat-container" id="attack"></div>
      <div>Defense:</div><div class="stat-container" id="defense"></div>
      <div>Special attck:</div><div class="stat-container" id="special-attack"></div>
      <div>Special def:</div><div class="stat-container" id="special-defense"></div>
      <div>Speed:</div><div class="stat-container" id="speed"></div>
    </body>
    <script src="./script.js"></script>
  </html>


const searchBar = document.getElementById('search-input')
const searchBtn = document.getElementById('search-button')
const imgContainer = document.getElementById('img-container')
const pokeName = document.getElementById('pokemon-name')
const id = document.getElementById('pokemon-id')
const weight = document.getElementById('weight')
const height = document.getElementById('height')
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 types = document.getElementById('types')
let pokeData

searchBtn.addEventListener('click', () => {
  if (searchBar.value) {
    fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchBar.value.toLowerCase()}`)
.then(res => res.json())
.then(data => {
  pokeData = data
  //console.log(pokeData)
  imgContainer.innerHTML = ''
  imgContainer.innerHTML += `<img id="sprite" src="${pokeData.sprites.front_default}">`
  pokeName.innerText = pokeData.name
  id.innerText = `#${pokeData.id}`
  weight.innerText = pokeData.weight
  height.innerText = pokeData.height
  types.innerHTML = JSON.stringify(pokeData.types)
  console.log(types.innerText) 
  hp.innerText = pokeData.stats[0].base_stat
  attack.innerText = pokeData.stats[1].base_stat
  defense.innerText = pokeData.stats[2].base_stat
  specialAttack.innerText = pokeData.stats[3].base_stat
  specialDefense.innerText = pokeData.stats[4].base_stat
  speed.innerText = pokeData.stats[5].base_stat
  }) 
.catch(err => {
  console.error(`Whoops! There was a ${err}`)
  alert('Pokémon not found')
  })
    searchBar.value = ''
  } else {
    alert('Please input a value') 
  }
})

The type data is decompiled, but treated as a string thanks to JSON.stringify()

I have no idea how to properly recover it as an array, please, help

Welcome!

Well, then why stringify it in the first place? types is a perfectly valid JS array of objects that you can manipulate further to extract the data that you want.

for me it just appears as [object Object] when I do not stringify

Edit: Just figured it out. ty!

1 Like

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