Scribd
Upload
11 views2 pages

PokeAPI Pokémon Data Fetching Guide

The document contains JavaScript functions for fetching and displaying Pokémon data from an API. The `getListing` function retrieves a list of Pokémon, while `getPokemon` fetches detailed information about a specific Pokémon. The `displayListing` and `displayPokemon` functions render the retrieved data onto a webpage.

Uploaded by

q5j64bbm52
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views2 pages

PokeAPI Pokémon Data Fetching Guide

The document contains JavaScript functions for fetching and displaying Pokémon data from an API. The `getListing` function retrieves a list of Pokémon, while `getPokemon` fetches detailed information about a specific Pokémon. The `displayListing` and `displayPokemon` functions render the retrieved data onto a webpage.

Uploaded by

q5j64bbm52
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

async function getListing(){

//performs an ajax request to the specified url to get pokemon data then pass
it to displayListing()
let url = "[Link]
try{
let response = await fetch(url);//1. Send http request and get response
let result = await [Link]();//2. Get data from response
displayListing(result);// 3. Do something with the data

}catch(e){
[Link](e);//catch and log any errors
}

function displayListing(pokeList){
//Renders a list of pokemon links to the page
let result = [Link]('#listing');

for(let record of [Link]){


[Link] +=
`<a class = "collection-item" id="${[Link]}" href="#"
onclick="getPokemon('${[Link]}')">${[Link]}</a> <br/>`;
}
}

async function getPokemon(pokemonName){


//given a pokemon name performs an ajax requests querying the pokemon's
// data and pass it to displayPokemon()
let url = "[Link]
url += `${pokemonName}`;

try{
let response = await fetch(url);//1. Send http request and get response
let pokemon = await [Link]();//2. Get data from response
displayPokemon(pokemon);

}catch(e){
[Link](e);//catch and log any errors
}
}

function displayPokemon(pokemon){
//renders details of the specified pokemon onto the page
let name = [Link];
[Link](name).href=`#${name}`;
let result = [Link]('#result');

for( let mon of [Link]) {


[Link] = `
${name}<br/>
<img src="${[Link].front_default}" alt="${[Link]}"
height="300" width="300" align="middle"><br/>
ID: ${[Link]}<br/>
Type: ${[Link]} <br/>
Weight: ${[Link]}<br/>
Height: ${[Link]}<br/> `
}
}

You might also like