Types part of RPG Creature Search App error

I realise on a reread, I did not explain myself to best here. “Not exactly what I was meaning,” was meant to stating, I did not explain myself very well in previous post, I did not have one of definition of logic, just only one came naturally to me this context. Logic can mean reasoning to me but I don’t really associate it with process like this. This is the issue when multiple words have multiple meaning and vice versa. Depending on who you are, you pair certain words and meanings together but not others despite being also correct English (or which ever language it is).

Computer code is often referred to as “logic” in this context.

You might think of a robotic arm as having a “mechanical” aspect being controlled by “logic” which would refer to computer code.

As well, we can refer to a higher level “logic” of how a program will execute, and the actual code is just implementation details.

For example, this code

if (x == 10): {
    console.log("Threshold has been reached")    
}

You would say that it’s an implementation of this logic:

If the variable x is equal to 10 then log a warning to the console.

or

If the concentration reaches 10k ppm then log a warning to the console.

Sometimes it’s useful to describe the higher level logic that a program will follow in English before implementing the coding details, which might be harder to understand. You can also separate “logic” errors from “syntax” or implementation errors.

Right let deal with of the two side points.

The logic needs to be correct

I think I know what Jeremy and kind if the rest of you was meaning here. I may talk to a computing knowledge friend about at some point or otherwise outside this thread. It was case of being an essentially new usage of the word to me, whether this is hard for you to believe or not. Though I suspected along what he might be referring to, just it was at least somewhat counterintuitive to my prior knowledge.

On how to share code, I am not sure I have got it but I will leave it to its own specialist thread at some point.

Right back to the main topic it would helpful, due to the side points if someone could summarise what has been said so far.

Part of me is not ready to share my code as I am not sure I have fully understood, what has been said here so far, instead of being a case of something like trying to what I asked to and making a error. However I feel there is probably benefit in sharing my code. Potentially you might want to used my shared code just to find out what I have already worked out.

I am also nervous about sharing my code as I feel I have had too much help and feel so much of my code was not been created independently. Feel free to alleviate my fears. Worth clarifying bringing this up, that this is my second thread on this project.

Here is my JavaScript. HTML is unchanged

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

console.log(\`data length is ${Object.keys(data).length}\`)

if (Object.keys(data).length===7){

  console.log(\`data is ${types}\`);

  typeN=>typesP.innerText+=\`${typeN.name}\`;  

}

})

/*.catch((err) => {

console.log(err);

alert("Creature not found")});\*/

//return;

}

searchBtn.addEventListener(“click”, viewCreatureStats);

What is the HTML #types element? The instructions ask you to add another element inside that element for each type associated with the creature.

1 Like

Right back to the main topic it would helpful, due to the side points if someone could summarise what has been said so far.

Part of me is not ready to share my code as I am not sure I have fully understood, what has been said here so far, instead of being a case of something like trying to what I asked to and making a error. However I feel there is probably benefit in sharing my code. Potentially you might want to used my shared code just to find out what I have already worked out.

I am also nervous about sharing my code as I feel I have had too much help and feel so much of my code was not been created independently. Feel free to alleviate my fears. Worth clarifying bringing this up, that this is my second thread on this project.

Here is my JavaScript. HTML is unchanged

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

console.log(`data length is ${Object.keys(data).length}`)

if (Object.keys(data).length===7){

console.log(`data is ${types}`);

typeN=>typesP.innerText+=`${typeN.name}`;

}

})

/*.catch((err) => {

console.log(err);

alert(“Creature not found”)});*/

//return;

}

searchBtn.addEventListener(“click”, viewCreatureStats);

Sharing my code again hopefully in a better format.

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
    console.log(`data length is ${Object.keys(data).length}`)
    if (Object.keys(data).length===7){
      console.log(`data is ${types}`);
      typeN=>typesP.innerText+=`${typeN.name}`;  
    }
  }) 
  
  /*.catch((err) => {
    console.log(err);
    alert("Creature not found")});*/
    
  
//return;


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

and does it give a value when you uncomment this? what is the value of types?

you need to consider this together with this earlier message

1 Like

Thankyou I think I was paying too much attention to solely PK Validis example and not too this post of yours. I know some changes to make, I may need further help I as I have been having trouble accessing the data from the types key value pair, but I will try again first.

“types.name” is undefined so I realised obviously not the right way to access that data but could not work out the right way but just have. Should I say?

Don’t forget, while correcting syntax errors is important, you do need a clear plan, preferably written down somewhere, on what your overall plan is for meeting the user stories.

are you interested in receiving feedback on it? whatever is your answer to this question it’s also the answer to “Should I say?”

Here it is types[0].name. I am still being unnecessarily cautious about sharing code. Not quite the same what trying to do initially. That was display an array of types for a creature, but this provides the information I need.

what if there are multiple types to get?

Solved it, using a mixture of the following two posts a maybe a little bit of independent work.

Great I have the course done before Christmas, would people object to ticking this as the solution given two responses combined to solve it.

Don’t know short of creating a new array. Object.values(types) gets me close, but that is far as I can get at this time.

I would not use Object.values on an array, but if you are passing the challenge, you are dealing also with the case of multiple types

I would mark the most recent post that helped as the solution. It’s not super important, but it’s nice to mark something so it’s clear this thread is resolved.

Fairly you could say the solution was the result of the entire thread.

I did use Object.values in passing the project. In case you thought I did, this was a side point.

you can use it on an array too, it just not makes sense to use Object.values on an array as it puts the values at each index in a new array, so you can just get them from the starting array