Help with an assignment

JavaScript
#1

im kinda new to javascript. using this function (which was my answer to a previous question in the assignment) i am supposed to load a list of 50 links with the class “collection-item” within an element with the id “listing”. how do i go about this. the teacher doesnt explain very well.
the previous question was to make an HTTP request for a collection of pokemon data using https://pokeapi.co/api/v2/pokemon/?limit=50&offset=50.

async function getPokemon(url){
try{
let response = await fetch(url);
let result = await response.json();
getListing(result);
}catch(e){
console.log(e);
}
}
getPokemon("https://pokeapi.co/api/v2/pokemon/?limit=50&offset=50")

1 Like
#2

Use a loop to iterate over the list.
Use document.querySelector("#id").innerHTML to put your data on the DOM.

1 Like
#3 
  async function getAllPokemon(){
            let url = "https://pokeapi.co/api/v2/pokemon/?limit=50&offset=50";
            try{
                let response = await fetch(url);
                let result = await response.json();
                displayAllPokemon(result);
            }catch(e){
                console.log(e);
            }
        }

        function displayAllPokemon(pokemon){
          let list=document.getElementById("listing").innerHTML;
          let i=0;
            for(i=0; i<50; i++){
                list=list+`<li><a class="collection-item" href="#" id="${pokemon[i].name}" onclick=getPokemonDetail('${pokemon[i].name}')>${pokemon[i].name}</a></li>`;
            }
            document.getElementById("listing").innerHTML = list;
        }

i tried to use a loop but i get no result… here is the place is supposed to be entered…

<main>
      <div id="listing" style="max-height: 600px; overflow-y: scroll;">
      </div>
1 Like
#4

Post what you have done

1 Like
#5

what do you mean? snip the output… in any case: here’s the code

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Poke Dextr</title>
  </head>

  <body onload="getAllPokemon()">
    <nav>
          <p>Poke Dextr</p>
          <a href="index.html">Listing</a>
    </nav>
    <main>
      <div id="listing" style="max-height: 600px; overflow-y: scroll;">
      </div>
      <div id="result">
      </div>
    </main>
    <script>
      

        async function getAllPokemon(){
            let url = "https://pokeapi.co/api/v2/pokemon/?limit=50&offset=50";
            try{
                let response = await fetch(url);
                let result = await response.json();
                console.log(result);
                displayAllPokemon(result);
            }catch(e){
                console.log(e);
            }
        }

        function displayAllPokemon(pokemon){
          let list=document.getElementById("listing").innerHTML;
          let i=0;
            for(i=0; i<pokemon.length; i++){
                list+=`<li><a class="collection-item" href="#" id="${pokemon[i].name}" onclick=getPokemonDetail('${pokemon[i].name}')>${pokemon[i].name}</a></li>`;
            }
            console.log(list);
            document.getElementById("listing").innerHTML = list;
        }
       
        getAllPokemon();

    </script>
  </body>
</html>```

and the output is just

![image_2021-02-14_051553|185x135](upload://h3nLfkp43g3r13qXlbcjjjrkzlA.png)
1 Like
#7

sd

#8 
          let list=document.getElementById("listing").innerHTML;

You can remove .innerHTML and end this line with the id

          let i=0;

You just need to declare your variable since you are initialising it in the next line

            for(i=0; i<pokemon.length; i++){
                list+=`<li><a class="collection-item" href="#" id="${pokemon[i].name}" onclick=getPokemonDetail('${pokemon[i].name}')>${pokemon[i].name}</a></li>`;
            }

Instead of ‘list +=’ try ‘list.innerHTML =’
You are trying to use a link to get the data that fetch has already pulled for you. The a element and the onclick property are not necessary innerrHTML = is good enough to display your data in your div.
I didnt look at how you are accessing the list I suppose you are ok with that

document.getElementById("listing").innerHTML = list;

I dont know what you are trying to achieve here. This is like getting your div and trying to put it in itself.

#9

ok now im really confused. im trying to list all 50 pokemon from the api onto a page. i am not getting the array and subsequently the list to print. so im supposed to have pokemon names being printed in a list, instead i get no output. “I didnt look at how you are accessing the list I suppose you are ok with that”. is this supposed to mean that getAllPokemon doesnt access the list to print out the names? i thought this function

async function getAllPokemon(){
            let url = "https://pokeapi.co/api/v2/pokemon/?limit=50&offset=50";
            try{
                let response = await fetch(url);
                let result = await response.json();
                displayAllPokemon(result);
            }catch(e){
                console.log(e);
            }
        }

would call the array which i can use to print a list of names using this function

function displayAllPokemon(pokemon){
          let list=document.getElementById("listing").innerHTML;
          let i=0;
          console.log(pokemon);
            for(i=0; i<50; i++){
                list.innerHTML+=`<li><a class="collection-item" href="#" id="${pokemon.name[i]}" onclick=getPokemonDetail('${pokemon.name[i]}')>${pokemon.name[i]}</a></li>`;
            }
            console.log(list);
        }
#10

ignore the above displayAllPokemon, is this what its supposed to look like?

function displayAllPokemon(pokemon){
          let list=document.getElementById("listing");
          console.log(pokemon);
            for(let i=0; i<50; i++){
                list.innerHTML+=`<li><a class="collection-item" href="#" id="${pokemon[i].name}" onclick=getPokemonDetail('${pokemon[i].name}')>${pokemon[i].name}</a></li>`;
            }
            console.log(list);
        }

im still getting errors

image_2021-02-14_072026
image_2021-02-14_072026555×978 52.8 KB

#11

You are trying to access an object that looks like this:

{"results":[{"name":"golduck"}]}

Can you tell what you are missing?

#12

im missing results but i just tried pokemon[i].results.name and results[i].pokemon.name unless i have the syntax all wrong…

#13

is results the array you get that contains the pokemons?

can you do console.log(pokemon)?
can you do console.log(pokemon[i])?

console.log(pokemon[i].results)

console.log(pokemon[i].results.name)

and then
console.log(results)
console.log(results[i])
console.log(results[i].pokemon)
console.log(results[i].pokemon.name)

which are the ones that show a value and not an error?
what do they print?

#14

image_2021-02-14_081353
image_2021-02-14_081353918×961 39.9 KB

pokemon.results[i].name works. thank you guys so much. can i ask why it has to be results[i] and not pokemon[i] though?

#15

results is an array inside of an object so use dot notation to access results thus: “pokemon.results” and then you can loop through results because you now have access to it.

#16

oh okay thank you very much again.