CODEWITHSUNDEEP
jsonapiforeachfetch-api
Ana Fernández
Ana Fernández

Reputation: 27

APIs using fetch - cannot read property 'forEach' of undefined

I'm trying to pull a select of all of the names of characters from Game of Thrones (show) using the API https://api.got.show/api/general/characters/ . I've tried multiple methods and all of them fail. Right now it says "TypeError: Cannot read property 'forEach' of undefined", when I've tried with other APIs and it works. I don't know what to do. Here's my code so far:

<body>
    <h1>Game of thrones</h1>
    <select>
        <option id="characters"></option>
</select>
    <script>
        fetch('https://api.got.show/api/general/characters/')
            .then(data => data.json())
            .then(data_json => {
                console.log(data_json)
                show(data_json)
            })
            .catch(err => alert(`Ha habido un error. ${err}`))

        let show = data_json => {
            data_json.results.forEach((element, index) => {
                document.getElementById('characters').innerHTML += `<option class""character">${element.name}</option>`;
            });
        }
    </script>
</body>

Upvotes: 0

Views: 68

Answers (1)

user13637316
user13637316

Reputation:

I tried calling the API myself. Looks like the data_json has two properties book and show but not results.

Try this snippet instead for the show function:

let show = data_json => {
  data_json.show.forEach((element, index) => {
    document.getElementById('characters').innerHTML += `<option class="character">${element.name}</option>`;
  });
}

Upvotes: 1

Related Questions