Why my data get undefined when I successfully get the response?

Bunny

I don't know why I get undefined when I tried to console.log at my final step in UseEffect

I've successfully gotten the response, the response returns to me with 200 status and data in it.

enter image description here

I designed my database like this

2 tables, animes table contains unique anime_title and auto-increment id.

id  anime_title anime_image anime_url

anime_detail table contains a foreign key that is linked with anime-title in animes table

id anime_title anime_episode anime_url

So in my code, I tried to get anime_title in my animes table in superbase based on the id from the useParams

I've successfully gotten both of them, and successfully use the anime_title to get all the anime_episode based on the anime_title

But when I tried to console.log the last step, it return to me undefined value, which I don't know why.

Here's my code:

import { useState, useEffect } from "react"
import './animedetail.css'
import { useParams } from 'react-router-dom'
import { supabase } from '../../supabaseClient'

function AnimeDetail(){

    let animeID = useParams()

    useEffect(async () => {
        // GET ID
        let id = await animeID.id
        console.log(id)

        // QUERY WITH ID
        const {data, error} = await supabase
        .from('animes')
        .select('id, anime_title, anime_url')
        .match({id: id})

        // GET ANIME TITLE BY ID
        let animeTitle = await data[0].anime_title
        console.log(animeTitle)

        // GET EPISODE BASED ON ANIME TITLE
        const {dataInfo} = await supabase
        .from(`anime_detail`)
        .select(`id, anime_title, anime_url, anime_episode`)
        .filter(`anime_title`, `in`, `(${animeTitle})`)

        console.log(dataInfo)
    }, [animeID])


    return (
        <>
        <div className = "anime-list-section">
        <h2>Anime Detail:</h2>
        <p></p>
        </div>
        </>
    )

}
export default AnimeDetail 
Tobi

Based on the documentation of supabase-js (https://supabase.com/docs/reference/javascript/filter) there is no dataInfo in the result of a filter query. Instead its just what you have above that when you executed the first query.

Deconstruct the result like the following to gather your information

// GET EPISODE BASED ON ANIME TITLE
const const {data: dataInfo, error: errorInfo } = await supabase // no dataInfo, but data, error like in the documentation
    .from(`anime_detail`)
    .select(`id, anime_title, anime_url, anime_episode`)
    .filter(`anime_title`, `in`, `(${animeTitle})`)

console.log(dataInfo)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

I get undefined when reading my response but there is a response in React.js

Why do I get a DataIntegrityViolationException when my data is of integrity?

Why is my response data undefined when sending a fetch()?

Why I cannot send proper Server status as response and instead I get a "no response" when I hit my endpoint?

Why do I get an error (Notice: Undefined index) when I try to echo a value from my database?

Ajax Get response data undefined

Why do I get undefined for response.name?

Why do I always get undefined response with this ajax post to php?

Why is there an second '\' when I get my path

Why do I get a "cannot read property of undefined" error when the data is defined?

Why do I get 'Cannot read property 'isValid' of undefined' when using 400 data points?

Why do I get "Undefined variable" in my custom PHP function

Why do I get an undefined return for my grade program?

Why do i get extra undefined in last row of my output?

Why do I get 'this is undefined' in my Octane component methods?

Why do I get "undefined local variable or method" in my code?

I get 'undefined' when i try to fetch data from an API but when i access it again it works. why?

Why i get Undefined variable when i use PostController in Laravel?

Not having a response when I call my web service GET request

Why do I get this error in my logcat when I try to post JSON data?

Why when I run my phpunit test I get an empty response but the same route/user in Postman behaves as expected?

Why do I get a sql grammar error when I can successfully execute in MySQL

I don't understand why my api is returning unknown/undefined when I call it using app.get

when I pass data to a component I get undefined

Why I get props is undefined?

Why I get "undefined" in JavaScript

Why do I get undefined when using this function?

Why do i get undefined when passing parameter to mapped getter?

Why do I get 'toUpperCase' of undefined when it's clearly defined?