Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Getting value of specific field in complicated json file using fetch and map

It seems a duplicated issue but really I can’t find a solution.

I have an issue that I can’t get specific values in a complex json file like this :

{
"get": "fixtures",
"parameters": {
    "date": "2024-01-17"
},
"errors": [],
"results": 218,
"paging": {
    "current": 1,
    "total": 1
},
"response": [
    {
        "fixture": {
            "id": 1156472,
            "referee": null,
            "timezone": "UTC",
            "date": "2024-01-17T00:00:00+00:00",
            "timestamp": 1705449600,
            "periods": {
                "first": null,
                "second": null
            },
            "venue": {
                "id": null,
                "name": "TBC",
                "city": "TBC"
            },
            "status": {
                "long": "Time to be defined",
                "short": "TBD",
                "elapsed": null
            }
        },
        "league": {
            "id": 667,
            "name": "Friendlies Clubs",
            "country": "World",
            "logo": "https://media.api-sports.io/football/leagues/667.png",
            "flag": null,
            "season": 2024,
            "round": "Club Friendlies 3"
        },
        "teams": {
            "home": {
                "id": 675,
                "name": "Vasas",
                "logo": "https://media.api-sports.io/football/teams/675.png",
                "winner": null
            },
            "away": {
                "id": 646,
                "name": "Levski Sofia",
                "logo": "https://media.api-sports.io/football/teams/646.png",
                "winner": null
            }
        },
        "goals": {
            "home": null,
            "away": null
        },
        "score": {
            "halftime": {
                "home": null,
                "away": null
            },
            "fulltime": {
                "home": null,
                "away": null
            },
            "extratime": {
                "home": null,
                "away": null
            },
            "penalty": {
                "home": null,
                "away": null
            }
        }
     },
     {

to fetch data I do like this :

let url = "http://localhost:8000/home/";

const [matches, setMatches] = useState([{}]);

const matchData = async () => {
  const res = await fetch(url);
    const d = await res.json();
  
    return setMatches(d.response);
}

useEffect(() => {
    matchData();
}, [{}]);

but when I want to test the returned values then I can’t,I tried a lot of solutions.

 matches?.map((match, index) => (

                                console.log(match.teams.home)
                            ))

then I get this error :

Cannot read properties of undefined (reading 'home')

and the same thing with other sub-levels like date, any idea?

Tags:

2

Answers


  1. 0

    This is because you are initializing matches with [{}] in this line
    const [matches, setMatches] = useState([{}]);

    So, when your component renders for the first time, value of match is {} and so match.teams is undefined and hence the error. useEffect will only get triggered after an initial render. You have the following options here

    1. Not initialize matches with [{}], but with []
    2. Use ?. operator (match?.teams?.home)
    3. Check if match has any keys, using Object.keys(match).length

    On a separate note, using [{}] as the second argument of useEffect is a bad idea. If you intended to run it only once, then replace the it with []

    Login or Signup to reply.
  2. 0

    You are getting that error because the initial value for your matches was [{}]. I believe you intended to initialize it as an empty array.
    [{}] is not an empty array.
    Instead, initialize it as [].
    const [matches, setMatches] = useState([{}]);
    const [matches, setMatches] = useState([]);
    The error is caused by the fact that the program attempts to map through your matches since it is not an empty array and when it accesses the object in the first index {}, it isn’t able to locate the teams and home properties.

    Also, don’t use {} as a dependency for your useEffect
    This would cause a rerender each time because the object reference changes after each render.
    Just leave it empty as [] if you want to run it just once

    The problem with your code in both cases is that you are trying to use [{}] as an empty array, which it is not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search