TypeError: cannot read properties of undefined reading '2'

Question

I am losing my mind, respectfully.

I am currently coding an assignment for my studies. I have to call an API using the async fetch method in Javascript using the Svelte framework. This is what i have in my app.svelte.

<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>

<title>Sollicitatie Opdracht Volcano</title>

<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>

<script defer src='/build/bundle.js'>
    import { onMount } from "svelte";

    const searchAnime = async () => {
        var response = await fetch('https://api.jikan.moe/v4/anime?q=jujutsu', {
            method: 'GET'
        });
        var result = await response.json();
        return result;
    }

    let aniSearchPromise = searchAnime();

</script>

<h1>API Fetching System</h1>


<main>  
{#await aniSearchPromise}
    <h2>Laden. . .</h2>
{:then data}
    <h2>{data.results[0]}</h2>
{:catch err}
    <h2>Error while loading data.</h2>
{/await}
</main>

<svelte:head>
    <title>aniAPI Test App</title>
</svelte:head>

<style>
    main {
        background-color: lavenderblush;
        font-size: 15px;
    }
    h1 {
        font-size: 25px;
    }
</style>

I am getting an error at

data.results[0]

I have no clue how to fix this as I can see that the promise is listed as fulfilled. On data.results[data[2]] is all the fetched data. See screenshot below

Would anyone be able to explain what is happening and why it is undefined? Many thanks.

Does this answer your question? TypeError: Cannot read properties of undefined (reading 'id') — Hef
– Hef, Commented Apr 3, 2022 at 20:12
looks like there's no results in that object - you probably want data[2] instead of data.results[2] — tbjgolden
– tbjgolden, Commented Apr 3, 2022 at 20:16

Muhammad Amir Ejaz · Accepted Answer · 2022-04-03 20:21:13Z

3

data.Results is not an array and and by seeing your object, probably data.Results does not exist here. In your object, data is an array so it should be used like data[2].

answered Apr 3, 2022 at 20:21

Muhammad Amir Ejaz

545 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dj0ulo · Accepted Answer · 2022-04-03 20:17:20Z

1

It seems that data has no attribute called results in your screenshot. Can't you just call data[0] or data[2] ?

answered Apr 3, 2022 at 20:17

Dj0ulo

4825 silver badges13 bronze badges

Comments

Evren · Accepted Answer · 2022-04-03 20:41:13Z

0

Api works correctly, probably you are trying to get data before it fetches

var response = fetch('https://api.jikan.moe/v4/anime?q=jujutsu', {
  method: 'GET'
}).then(response => response.json())
.then(result => {
  console.log('Data [0] result', result.data[0]);
})

answered Apr 3, 2022 at 20:41

Evren

4,4601 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

TypeError: cannot read properties of undefined reading '2'

data.results[0]

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

data.results[0]

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related