I'm having trouble accessing the data, I want to make a condition based on specific object
#Manipulate Fetch Data
slate moth
you have to be more specific than this
dusk oar
you have to be more specific than this
One of the objects is winner and each array has a winner object, the value is 1 or 0 and I want to make an if statement for each array.
import React from "react";
import { useParams } from "react-router-dom";
import useFetch from "../hooks/useFetch";
const Profile = () => {
const { playerName } = useParams();
const searchName = playerName.toLowerCase().replace(/\s/g, "");
const playerStats = useFetch(`http://45.32.95.133/api/player/${searchName}`);
return (
<>
<Box>
<Box component={"div"} sx={{ textAlign: 'center' }}>
<h1>Profile {playerName}</h1>
</Box>
<Box>
<Box>
<Container>
<TableContainer component={Paper}>
<Table sx={{ maxwidth: 650 }}>
<TableHead>
<TableRow>
<TableCell> Game Info </TableCell>
<TableCell> Champion </TableCell>
<TableCell> Overall Stats </TableCell>
<TableCell> Multikills </TableCell>
<TableCell> Damage Stats </TableCell>
<TableCell> Vision Stats </TableCell>
</TableRow>
</TableHead>
<TableBody>
{playerStats ? (
playerStats?.map((player) => {
return (
<>
<TableRow>
<TableCell>
{player.team} <br/>
{player.role} <br/>
{player.playtime}
</TableCell>
I'm trying to access it, I can map it but when I try to go into the data even to console log I don't know what im doing wrong
dusk oar
I cant even console log playerStats.length even tho when i just do playerStats it shows the array length
@slate moth
Idk how specific you want me to be i tell you problem as best I can
Idk how to access the arrays/objects properly but I can map them out fine
So idk
slate moth
What exactly is the issue?
What is the code supposed to do and what is it doing?
Any errors?
slate moth
https://i.imgur.com/AZ9SJqH.png
So, you have this array of objects, and you want to filter objects based on their property?
dusk oar
So, you have this array of objects, and you want to filter objects based on thei...
I want to grab the winner object in each array and make an if statements based on the winner object value
The issue is my syntax is wrong
Idk what I am doing wrong when I thought I was doing it right the whole time
slate moth
I want to grab the winner object in each array and make an if statements based o...
I am not sure what you mean. Do you know what objects and arrays are?
slate moth
ok, can I see what the winner property looks like?
dusk oar
It looks like this in the backend [ { "gameid": "4569717954", "player": "TD YarGraY", "role": "TOP", "champion": "Illaoi", "team": "Blue", "playtime": "23:03", "kills": 4, "deaths": 0, "assists": 2, "championdamage": 16248, "structuredamage": 7557, "damagehealed": 7403, "shielded": 0, "damagetaken": 19573, "damagemitigated": 18368, "visionscore": 13, "pinkspurchased": 1, "wardsplaced": 8, "wardsdestroyed": 1, "goldearned": 11290, "championlevel": 15, "cs": 201, "minionkills": 198, "jungleminionkills": 3, "towersdestroyed": 5.0, "inhibitorsdestoyed": 0, "ccscore": 9, "damageperminute": 704.81, "goldperminute": 489.72, "visionperminute": 0.6, "winner": 1, "effectivehealingandshielding": 0.0, "epicmonstersteals": 0, "flawlessaces": 0, "aces": 0, "multikills": 0, "solokills": 3, "pentakills": 0, "quadrakills": 0, "triplekills": 0 }, { "gameid": "4569754524", "player": "TD YarGraY", "role": "TOP", "champion": "Illaoi",
slate moth
winner is not an object. It's a property of an object
And what is the code you have written to filter it?
dusk oar
Yes my bad
I just trying to console log it nothing was written to filter through it
I tried doing playerStats[0].winner but it says there is no winner
slate moth
Any error?
dusk oar
dusk oar
Im using a hook
I posted the hook above
custom hook
Nvm i didnt
here
import { useEffect, useState } from "react";
export default function useFetch(url) {
const [apiData, setData] = useState();
useEffect(() => {
async function fetchData() {
const response = await fetch(url);
if (response.status === 404) {
console.log(404);
setData('404')
} else {
const data = await response.json();
setData(data);
}
}
fetchData();
}, [url]);
return apiData;
}
Oh wait
nvm
slate moth
Can you show me the code that works and the one that breaks?
quick patrolBOT
@dusk oar
dusk oar
just doing console.log(playerStats[0]) breaks
but mapping it works fine for whatever reason
slate moth
but this code doesn't have playerStats?
dusk oar
player Stats is in this file
quick patrolBOT
@dusk oar
slate moth
I think the reason is that playerStats is not fetched by that point
since it's asynchronous
What happens when you console.log it in the return statement?
dusk oar
But I can console log playerStats
Anytime i try and go to nested objects/properties it errors
slate moth
So, when you do console.log(playerStats), it works, but when you do console.log(playerStats[0].winner) it breaks?
dusk oar
Yes
I haven't tried doing console log in the return because I didnt think react would allow it
slate moth
https://i.imgur.com/k0AOG08.png
but why does it print 404 here?
doesn't it do that when the api endpoint is not found?
dusk oar
Yeah
Hold on
it doesnt make sense why it isnt found tho
It only 404 when I go into properties but it doesnt 404 when I just log playerStats
Could it be the hook? Idk
slate moth
Could it be the hook? Idk
is the endpoint the same?
dusk oar
It looks like this in the backend `[
{
"gameid": "4569717954",
...
this is the endpoint
dusk oar
it should be
slate moth
const playerStats = useFetch(`http://45.32.95.133/api/player/${searchName}`); Is searchName same in both cases?
dusk oar
but i cant think of why it wouldnt
slate moth
hmm...then I am not sure why it's sending 404
slate moth
yeah, but why doesn't it exist when you are querying the exact same thing??
dusk oar
is there a way to check what endpoint or the process in inspect element?
slate moth
just make sure searchName is the same by logging it
dusk oar
ok
const { playerName } = useParams();
const searchName = playerName.toLowerCase().replace(/\s/g, "");
console.log(searchName)
const playerStats = useFetch(`http://45.32.95.133/api/player/${searchName}`);
console.log(playerStats)
console.log(playerStats[0])
for some reason playerstats is undefined?
For some reason its doing it 2 times aswell when it DOES work and not accessing properties https://i.imgur.com/0vOlzyj.png
its on a production build but i need to make a testing enviorn
slate moth
hmm...you might have to use useEffect
dusk oar
the custom hooks is using use effect
slate moth
ok, the problem is that you are accessing a property (winner) that doesn't exist yet. So, it throws an error. Try this. console.log(playerStats ? playerStats[0].winner : undefined)
slate moth
It is initially undefined
console.log(playerStats) worked because you were not trying to access a property of undefined.
dusk oar
then should i change my code
slate moth
better way of doing this is playerStats && <div>playerStats[0].winner</div> when you render the data