'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 |
|---|
