I currently have 2 files saved locally
The code within the +page.svelte file is shown below:
<script lang="ts">
import type { PageData } from "./$types";
import { generations } from "./generations";
export let data: PageData;
</script>
{#each data.monsters as monster (monster.url)}
<h1>{monster.id}: {monster.name}</h1>
{/each}
{
#each generations as generation (generation.id)}
<h1>{generation.name}</h1>
<p>Games: {generation.games.join(', ')}</p>
<p>Main Region: {generation.main_region}</p>
{/each}
The code within the +page.ts file is shown below:
import type { PageLoad } from './$types'
type IndexMonster = {
name: string
url: string
}
export const load = (async ({ fetch }) => {
const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20')
const json = await response.json()
const monsters = json.results.map((monster: IndexMonster) => {
const splitUrl = monster.url.split('/')
const id = splitUrl[splitUrl.length - 2]
return {
name: monster.name,
url: monster.url,
id,
}
})
return {
monsters: json.results
}
}) satisfies PageLoad
An error message I encountered is displayed below:
TypeError: fetch failed
at fetch (D:\Documents\Ty\THE BIM FACTORY 4.7.2022\Code\WepApp\- js-pokedex-sveltekit\node_modules\undici\index.js:109:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.eval [as fetch] (/node_modules/@sveltejs/kit/src/runtime/server/fetch.js:27:10) at async eval (/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:195:18) at async load (D:/Documents/Ty/THE BIM FACTORY 4.7.2022/Code/WepApp/- js-pokedex-sveltekit/src/routes/+page.ts:9:23)
If you could offer any assistance in resolving this error, it would be greatly appreciated as I am relatively new to Svelte!
The desired outcome upon resolution can be viewed in the following link: enter image description here