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.

17

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