'API returns Undefined [closed]

I'm new to coding. Fetch API returns Undefined promise when executed. I cannot figure out what I have done wrong despite hours of Googling. Name, Gender, & Homeworld all return Undefined. Have I missed returning the function correctly or is the data not able to be read correctly from the Json file?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 201 Fetch API</title>
</head>
<body>

    <strong>Name:</strong>
    <div id="name">...</div>

    <strong>Gender:</strong>
    <div id="gender">...</div>

    <strong>Homeworld:</strong>
    <div id="homeworld">...</div>
    
    <button class="getRandomCharacter"> Get Random Star Wars Character</button>
    
    <script>
        const name = document.getElementById("name");
        const gender = document.getElementById("gender");
        const homeworld = document.getElementById("homeworld");

        const button = document.querySelector(".getRandomCharacter")
        button.addEventListener('click', (e) => {
            e.preventDefault()
            name.innerHTML = '<em>Loading Results...</em>'
            gender.innerHTML = '<em>Loading Results...</em>'
            homeworld.innerHTML = '<em>Loading Results...</em>'

        const randomNumber = Math.ceil(Math.random() * 83)
            fetch(`https://www.swapi.tech/api/people/${randomNumber}/`)
            .then(response => response.json())
            .then(character => {
                                
                name.innerHTML = character['name'];
                gender.innerHTML = character['gender'];
                homeworld.innerHTML = character['homeworld'];
                                           
            })                        
        })         
       
    </script>
</body>
</html>
apiundefined


Solution 1:[1]

If you look at the structure of the json you notice that the data you're lookin for is not at the root, but under result/properties

name.innerHTML = character['result']['properties']['name'];
gender.innerHTML = character['result']['properties']['gender'];
homeworld.innerHTML = character['result']['properties']['homeworld'];

{
    "message": "ok",
    "result": {
        "properties": {
            "height": "234",
            "mass": "136",
            "hair_color": "brown",
            "skin_color": "brown",
            "eye_color": "blue",
            "birth_year": "unknown",
            "gender": "male",
            "created": "2022-04-17T13:16:16.412Z",
            "edited": "2022-04-17T13:16:16.412Z",
            "name": "Tarfful",
            "homeworld": "https://www.swapi.tech/api/planets/14",
            "url": "https://www.swapi.tech/api/people/80"
        },
        "description": "A person within the Star Wars universe",
        "_id": "5f63a36fee9fd7000499be90",
        "uid": "80",
        "__v": 0
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Musa

Related Questions