Uncaught (in promise) TypeError: - website loads the data but error message in console

Question

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?

Answer 1

It is because of this part of the JSON:

 "year": 2025,
        "series": "2025/2026"

The for loop is trying to loop for episodes here:

for (var episodes in previous[props]) {
  for (var episode in previous[props][episodes]) {

But year and series don’t have episode. That is the error you are seeing.

I don’t know what you have planned for the year and series, but you can filter that out if you are not using it.