Types part of RPG Creature Search App error

You can find out by disabling them.

I thought it did, admitted in a roundabout way.

I maybe should used a for loop not a forEach as I am stronger on the later.

Which line or block of code does this?

There is no special syntax that will fix this. The logic needs to be correct, then any syntax that expresses that logic will work fine.

I thought types.forEach(typeN=>typesP.innerText+=` ${typeN.name}`); would if I got my if statement sorted but as I was already thinking at the time of previous post, note the wording, obviously not.

I know it is going to need a part radically changed but thought it was best to share my updated HTML code.

const searchBtn=document.getElementById("search-button");
async function viewCreatureStats() {
  const searchInput=document.getElementById("search-input").value;
  const creatureNameP=document.getElementById("creature-name");
  const creatureIdP=document.getElementById("creature-id");
  const weightP=document.getElementById("weight");
  const heightP=document.getElementById("height");
  const typesP=document.getElementById("types");
  const hpP=document.getElementById("hp");
  const attackP=document.getElementById("attack");
  const defenseP=document.getElementById("defense");
  const specialAttackP=document.getElementById("special-attack");
  const specialDefenseP=document.getElementById("special-defense");
  const speedP=document.getElementById("speed");
typesP.innerText=``;    
      fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchInput}`)
  .then(res => res.json())
  .then((data)=>{
        //consider .map() and hasOwnProperty() methods
    const {id, name, weight, height, stats, types}=data;
    // I assume ignore the "special" key
    creatureNameP.innerText=`${name.toUpperCase()}`;
    creatureIdP.innerText=`#${id}`;
    weightP.innerText=`Weight: ${weight}`;
    heightP.innerText=`Height: ${height}`;
    hpP.innerText=`${stats[0].base_stat}`;
    attackP.innerText=`${stats[1].base_stat}`;
    defenseP.innerText=`${stats[2].base_stat}`;
    specialAttackP.innerText=`${stats[3].base_stat}`;
    specialDefenseP.innerText=`${stats[4].base_stat}`;
    speedP.innerText=`${stats[5].base_stat}`;
    console.log(types.name);//Line is there for debugging only
    if (data.hasOwnProperty(types)){
      types.forEach(typeN=>typesP.innerText+=` ${typeN.name}`);  
    }
  }) 
  
  .catch((err) => {
    console.log(err);
    alert("Creature not found")});
    
  
//return;


}
searchBtn.addEventListener("click", viewCreatureStats);

Note that the instructions are specifically requesting that you change the structure of the HTML the number of elements, based upon the specific creature

Clarify what you mean by logic to ensure I am got the right end of stick. When I think of logic I think of (at least in this context) conditional statements, is that what you are referring to.

No, a conditional statement is a piece of syntax. I mean the logical plan that you want your code to follow. Syntax will not fix a miss piece of the plan.

1 Like

Thankyou for not assuming, I understand what was meant in previous posts. This message gives me new insight.

Sorry I am someone who studied set theory as a part of my [Maths] degree I associate logic with AND, OR and AND/OR not a millions miles from IF. Is this definition of logic the same as strategy. To be honest this post may be mot as I wrote my message about logic before reading your one, 16 minutes ago, at time of writing.

Plan, strategy, logic, here basically all refer to how your code will run, and you could describe this in pseudocode, basically English:

  1. start a loop over this array
  2. take the first element in the array
    2b) If it is less than 5, then add it to the new array
    2c) If it greater than or equal to 5, then skip it

Something like this.

Describe, in English, what you trying to accomplish, in a step by step manner.

Is this an example not related to my program?

I’m a mathematician. Logic is definitely not limited to AND, OR, and AND/OR in math.

Not exactly what I was meaning, just it is what I first think of, when I hear the term this context. Anyway I will leave this point here, as I know what you mean now anyway.

It’s just something I made up, it’s not related to your program.

You should make something similar but as it relates to your program.

Thought so, just wanted to sure

it’s not a browser extension thing, it’s the two different modes of the editor:
you can switch between rich editor and markdown editor from this button: image

Thankyou, I will try properly when I have next have need to share my code but that appears to work. I also glad you found this thread. Finally good to know on this occasion for a change, I am not the mistaken one.