'EJS error Cannot read properties of undefined (reading 'url')

I have code to fetch to an api. all the controllers are the same except for their numbers due to being different genres. the ejs view they all use is the exact same. but only two of my methods in controllers actually display to the view the cover.url correctly. every other controller gives me an error Cannot read properties of undefined (reading 'url').

only my getFighting and getRts methods display correctly the rest dont

EJS Code

<%- include('./partials/Header.ejs') %> 
<a href="/catagories"><i class="fa-solid fa-circle-left"></i>
<div class="genre-title">
     </a> <h3><%= genreName %> </h3>

</div>
<div class="games-list">
    <div class="genre-games-list">
        <ul>
            <% games.forEach(gameData => { %> 
                <li>
                  
                    <%= gameData.name %>
                    <img src=<%=gameData.cover.url%>  alt="" />
                    
                </li>
              
                <% }) %> 
        </ul>
    </div>
   
    
</div>

Here is my controllers

const fetch = require('node-fetch');
require('dotenv').config();



const Categories = {
    // get genre 
     getGenre(req,res){
    

        const response =  fetch("https://api.igdb.com/v4/genres", {
            method: "POST",
            headers: {
                'Client-ID': process.env.clientid,
                'Authorization': 'Bearer ' + process.env.auth
    
            },
            body: 'fields *;'
        }).then(response => response.json())
        .then(data => {
          console.log(data)
          res.render('catagories', {title: 'catagories', category: data})
        })
        .catch(err => console.log(err.message))
    
       
    },
    getMusic(req,res) {
        const response =  fetch("https://api.igdb.com/v4/games", {
            method: "POST",
            headers: {
                'Client-ID': process.env.clientid,
                'Authorization': 'Bearer ' + process.env.auth
    
            },
            body: 'fields name, cover.url; where genres = (7);'
        }).then(response => response.json())
        .then(data => {
          console.log(data)
          res.render('gamesList', {title: 'Music', genreName: 'Music Games', games: data})
        })
        .catch(err => console.log(err.message))
    
    
    },

    getFighting(req,res) {
        const response =  fetch("https://api.igdb.com/v4/games", {
            method: "POST",
            headers: {
                'Client-ID': process.env.clientid,
                'Authorization': 'Bearer ' + process.env.auth
    
            },
            body: 'fields name, cover.*; where genres = (4);'
        }).then(response => response.json()).then(data => {
          console.log(data)
          res.render('gamesList', {title: 'Music', genreName: 'Music Games', games: data})
        })
        .catch(err => console.log(err.message))
    
    
    },
    
     getPlatform (req,res) {
        const response =   fetch("https://api.igdb.com/v4/games", {
            method: "POST",
            headers: {
                'Client-ID': process.env.clientid,
                'Authorization': 'Bearer ' + process.env.auth
    
            },
            body: 'fields name, cover.*; where genres = (8);'
        }).then(response => response.json()).then(data => {
          console.log(data)
          res.render('gamesList', {title: 'Music', genreName: 'Music Games', games: data})
        })
        .catch(err => console.log(err.message))
    
    
    },
 
 
getRpg (req,res) {
    const response =  fetch("https://api.igdb.com/v4/games", {
        method: "POST",
        headers: {
            'Client-ID': process.env.clientid,
            'Authorization': 'Bearer ' + process.env.auth

        },
        body: 'fields name, cover.*; where genres = (12);'
    }).then(response => response.json()).then(data => {
      console.log(data)
      res.render('gamesList', {title: 'Music', genreName: 'Music Games', games: data})
    })
    .catch(err => console.log(err.message))

},

getRts(req,res)  {
    const response =  fetch("https://api.igdb.com/v4/games", {
        method: "POST",
        headers: {
            'Client-ID': process.env.clientid,
            'Authorization': 'Bearer ' + process.env.auth

        },
        body: 'fields name, cover.*; where genres = (11);'
    }).then(response => response.json()).then(data => {
      console.log(data)
      res.render('gamesList', {title: 'Music', genreName: 'Music Games', games: data})
    })
    .catch(err => console.log(err.message))

},

}

I tried to call to an api and i do get the data object back and it works for only two of my controllers when i try to display the cover.url. the rest of my controllers are unable to display it Cannot read properties of undefined (reading 'url')



Sources

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

Source: Stack Overflow

Solution Source