Build an RPG Creature Search App Project - Build an RPG Creature Search App

Tell us what’s happening:

I have been stuck on getting the base stat data of the creatures to display the correct data. i’ve destructured the stats array and tried getting the value of each key of the base_stat it displays only the last value of the keys in the base_stat , i don’t quiet understand how to tackle this. Is it indexing issue or is there something i’m doing wrong cause i’m confuse rn

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG Creature Search App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <h1 class="title">RPG Creature Search App</h1>
    </header>
    <main>
      <div class="container">
        <label for="search-input">Enter Creature Name or ID:</label>
        <input id="search-input" class="search-input" required />
        <button id="search-button" class="search-btn" type="button">Search</button>
        <div class="result-container">
          <div id="creature-name"></div>
          <div id="creature-id"></div>
        </div>
        <div class="more-info">
          <div id="weight"></div>
          <div id="height"></div>
        </div>
          <div id="types"></div>
        <div class="table-wrapper">
          <table id="base-stats">
            <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">-</td>
            </tr>
          </table>
        </div>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>
/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const creatureName = document.getElementById("creature-name");
const creatureId = document.getElementById("creature-id");
const creatureWeight = document.getElementById("weight");
const creatureHeight = document.getElementById("height");
const types = document.getElementById("types");
const creatureHp = document.getElementById("hp");
const creatureAttack = document.getElementById("attack");
const creatureDefense = document.getElementById("defense");
const spAttack = document.getElementById("special-attack");
const spDefense = document.getElementById("special-defense");
const creatureSpeed = document.getElementById("speed");
const tableContent = document.getElementById("base-stats");

let creatureDataArr = [];

fetch("https://rpg-creature-api.freecodecamp.rocks/api/creatures")
  .then((res) => res.json())
  .then((data) => {
    creatureDataArr = data;
  })
  .catch((err) => console.error("There was an error while fetching data!", err));

searchBtn.addEventListener("click", () => {
  const input = searchInput.value.toLowerCase();
  const match = creatureDataArr.find((creature) => creature.name.toLowerCase() === input);

  if (!input) {
    alert("Please enter a creature name or id");
    return;
  }

  if (!match) {
    alert("Creature not found");
    searchInput.value = "";
  } else {
    fetchCreatureData(match.name);
    searchInput.value = "";
  }
});

let anotherDataArr = [];

const fetchCreatureData = (nameOrId) => {
  const creatureData = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${nameOrId}`

  fetch(creatureData)
    .then((res) => res.json())
    .then((data) => {
      anotherDataArr = data;
      displayResult(anotherDataArr);
    })
    .catch((error) => console.error("There was an error while fetching data!", error));
}

const displayResult = (arr) => {
  const { 
    id,
    name,
    weight,
    height,
    special,
    stats,
    types
  } = arr;

  creatureName.innerHTML = `${name}`;
  creatureId.innerHTML = `#${id}`;
  creatureWeight.innerHTML = `Weight: ${weight}`;
  creatureHeight.innerHTML = `Height: ${height}`;
  
  stats.map(({ base_stat }) => {
    creatureHp.innerHTML = `${base_stat}`;
    creatureAttack.innerHTML = `${base_stat}`;
    creatureDefense.innerHTML = `${base_stat}`;
    spAttack.innerHTML = `${base_stat}`;
    spDefense.innerHTML = `${base_stat}`;
    creatureSpeed.innerHTML = `${base_stat}`;
  })
}
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build an RPG Creature Search App Project - Build an RPG Creature Search App

Can you explain a bit more with an example?

Imagine I have never done this exercise before and explain, with examples, what the problem is?

Ok. I’m trying to get the individual data of the base stat to display on the table. But I’m only getting the last value to display, for example if i search for pyrolynx inside of displaying Hp: 65, attack: 80, defense: 50, spAttack: 90, spDefense: 55, speed: 100, it displays Hp: 100, Attack: 100, defense, 100, spAttack: 100, spDefense: 100, speed: 100.

here you are giving teh same value to everything, if you use the same variable it’s not goint to have different values

Couple of things…

Why are you using stats.map()? Are you returning an array?

stats is an array of objects, right? For each stat, one way to do this would be to search the array for an object with a name equal to the stat name. Can you think of how you could do that?

And why are you fetching all of the creatures when you’re only searching for one?

I understood what needs to be done and i got it right thank you

I created a variable document.getElementById(name) inside the .map after destructuring name, and base_stat of the creature, the variable searches for an element with the id that matches the name, if it finds it it update the text content in that element. And also i just did a little research between forEach and map, I’m supposed to use forEach since i’m trying to make a side effect on updating something external… Thank you for your time

1 Like