i am trying to build a simple website, fetching data from github.
I have two datasets here.
The currentAPI is loaded correctly, while the other one throws error message “Uncaught (in promise) TypeError: album is not defined”, nevertheless the website loads the data!
I have an async function:
async function getData() {
const previousPromise=fetch('https://raw.githubusercontent.com/balintov/matchmaker/refs/heads/main/previousPicturesAPI');
const currentPromise=fetch('https://raw.githubusercontent.com/balintov/matchmaker/refs/heads/main/currentPicturesAPI');
const responses = await Promise.all([previousPromise, currentPromise]);
const dataPromises = responses.map(r => r.json());
const [previous, current] = await Promise.all(dataPromises);
for (var props in previous) {
document.getElementById('main').innerHTML+= `<div class="previousTitle"><h2> Korábbi részek </h2><p>${previous[props].series} évad</p></div>`
for (var episodes in previous[props]) {
for (var episode in previous[props][episodes]) {
//THIS CONSOLE MESSAGE RETRIVES THE DATA
console.log(previous[props][episodes][episode].album.photolink);
var episodeProp= previous[props][episodes][episode];
document.getElementById('main').innerHTML+= `<div class="episode-container">
<div class="episode-head">
/* HERE THE DATA WORKS, DOES NOT THROW MESSAGE */
<h2>${episodeProp.episode_date}</h2>
<p><a href=${episodeProp.episode} target="_blank">Hallgatom az epizódot!</a></p>
</div>
<div class="match-container">
<div class="album-container">
<div class="content-container">
<h3>Album</h3>
/* FROM HERE THROWS THE ERROR MESSAGE */
<img src="${episodeProp.album.photolink}" alt="${episodeProp.album.description}" width="350" height="450" class="image">
<p>${episodeProp.album.song}</p><p><a href="${episodeProp.album.spotifylink}" target="_blank">Hallgatom ▶️</a></p>
</div>
</div>
<div class="picture-container">
<div class="content-container">
<h3>Kép</h3>
<img src="${episodeProp.picture.photolink}" alt="${episodeProp.picture.description}" width="350" height="450" class="image">
<p>${episodeProp.picture.description}</p>
</div>
</div>
</div>
</div>`
}
}
}
}
getData();
I put the data set in JSON validator, I put the JS file into JS validator.
As I mentioned in the code comment, before the template literal string the data is not undefined.
Also in the template literal some data work perfectly.
The exact error message is: “Uncaught (in promise) TypeError: episodeProp.album is undefined”
I really do not understand what the problem is, could someone give a clue?