If else statement prints only the first result from API

I want to create 5 buttons (Each button represent a season)
Each button should show a div of its episodes and hide the other episodes for the other seasons

But when I fetch episodes from the API, it only returns the episodes of the first season

HTML

    <style>
        .episodes-hide {
            display: none;
        }
    </style>
    <p>Select your size:</p>
    <div id="season">
        <button onclick="showSeasons(1)"> Season 1</button>
        <button onclick="showSeasons(2)"> Season 2</button>
        <button onclick="showSeasons(3)"> Season 3</button>
        <button onclick="showSeasons(4)"> Season 4</button>
        <button onclick="showSeasons(5)"> Season 5</button>
    </div>


    <div class="episodes-hide" id="1"> S1 </div>
    <div class="episodes-hide" id="2"> S2 </div>
    <div class="episodes-hide" id="3"> S3 </div>
    <div class="episodes-hide" id="4"> S4 </div>
    <div class="episodes-hide" id="4"> S5 </div>

JavaScript

// Toggle hide/Show seasons (This code works )

function showSeasons(s) {
    var vis = document.querySelector('.episodes-show'),
        season = document.getElementById(s);
    console.log(season)
    if (vis !== null) {
        vis.className = 'episodes-hide';
    }
    if (season !== null) {
        season.className = 'episodes-show';
    };
}

Broken JavaScript code

fetch("https://www.breakingbadapi.com/api/episodes")
    .then((res) => { return res.json() })
    .then((data) => {
        let episodes = data
            // only keep the Breaking Bad episodes
            //Because the API has another series
            .filter((episode) => episode.series === "Breaking Bad")
        return episodes;
    })
    .then((episodes) => {
        episodes.forEach(e => {
            if (e.season === "1") {
                //Season 1
                addEpisodes(e, 1);
             // console.log(e.length) //6
            } else if (e.season === "2") {
                //Season 2
                addEpisodes(e, 2);
                // console.log(e.length) // Nothing is printed to the console

            } else if (e.season === "3") {
                //Season 3
                addEpisodes(e, 3);

            } else if (e.season === "4") {
                //Season 4
                addEpisodes(e, 4);
            } else {
                //Season 5
                addEpisodes(e, 5);
            }
        });
    })

function addEpisodes(e, x) {
    // e => episode
    // x => season number
    const episodeCard = document.createElement("div");
    episodeCard.className = "episode";
    episodeCard.innerHTML =
        `
    <div class="episode-info">
        <p class="episode-num"> Episode <b id="episode-num"> ${e.episode} </b> </p>
        <h3 class="episode-title" id="episode-title"> ${e.title} </h3>
        <p class="air_date"> ${e.air_date}</p>
    </div>
    `
    document.getElementById(`${x}`).append(episodeCard);
  /*  And this line throws this error :
  Uncaught (in promise) TypeError: document.getElementById(...) is null
*/ 
}

I think your problem is display: none;

when display:none is applied to an HTML element, it is not visible in the page, and this too makes perfect sense. In this case, however, the element has no effect on the DOM, and as far as the other elements around it are concerned, it simply does not exist.

On a side note, you don’t need all those if-else statements. The season number is part of the episode data, so all episodes could be sent to addEpisode the same way and x could be pulled out of the data.

Also, you have id="4" twice, which will cause problems.

1 Like