Nested if else statements only works on first statement

Question

I am having an issue with nested if else statements. In this issue, it only executes the first if statement and skips all of the rest, when I want every statement to be executed. The else if statement works fine when there is nothing nested inside it, but when I nest additional if else statements only the first one seems to work. Here is my javascript code:

const apiURL2 = "https://api.openweathermap.org/data/2.5/forecast?id=5604473&appid=6d1d830097a2c0bac1aba2337d0139e6";

fetch(apiURL2).then((response) => response.json()).then((jsonObject) => {
const list = jsonObject['list'];
console.log(jsonObject);
for ( let i = 0; i < 5; i++){

    let divForecastData = document.querySelector('div.weather-forecast-wrapper');
    let temp1 = document.createElement("div");
    let tempday = document.createElement("p");
    let temperature = document.createElement("p");
    let icon = document.createElement("i");
    
    temperature.className = "temp";
    tempday.className = "weekday";
    temp1.className = "day";

    if (i == 0){
      tempday.textContent = "Sat";
      temperature.textContent = list[i].main.temp;
      if (list[i].weather[i].main = "Clear"){
        icon.className = "worked"
      }
      else {
        icon.className = " still worked"
      }
      
    }
    else if (i == 1){
      tempday.textContent = "Sun";
      var far = list[i].main.temp
      var kel = far * (9/5) - 459.67;
      temperature.textContent = Math.round(kel) + "℉";
      if (list[i].weather[i].main = "Clear"){
        icon.className = "worked"
      }
      else {
        icon.className = " still worked"
      }
      
    }
    else if (i == 2){
      tempday.textContent = "Mon";
      temperature.textContent = list[i].main.temp;
    }
    else if (i == 3){
      tempday.textContent = "Wed";
      temperature.textContent = list[i].main.temp;
    }
    else{
      tempday.textContent = "Thu";
      temperature.textContent = list[i].main.temp;
      
    }


    divForecastData.appendChild(temp1);
    temp1.appendChild(tempday);
    temp1.appendChild(icon);
    temp1.appendChild(temperature);
    

}






  });

any suggestions?

Answer 1

Comparaison are coded with == or === ...

So this is not good. if (list[i].weather[i].main = "Clear")

But list[i].weather[i] something doesn't exists, I know because it's there is a big red message that appears on the console just by running the code. You maybe wanted to use list[i].weather[0] .

Here is a corrected code snippet

 const apiURL2 = "https://api.openweathermap.org/data/2.5/forecast?id=5604473&appid=6d1d830097a2c0bac1aba2337d0139e6"; fetch(apiURL2).then((response) => response.json()).then((jsonObject) => { let divForecastData = document.querySelector('div.weather-forecast-wrapper'); console.log(jsonObject); const list = jsonObject['list']; for ( let i = 0; i < 5; i++){ const item = list[i]; let temp1 = document.createElement("div"); let tempday = document.createElement("p"); let temperature = document.createElement("p"); let icon = document.createElement("i"); temperature.className = "temp"; tempday.className = "weekday"; temp1.className = "day"; if (i == 0){ tempday.textContent = "Sat"; temperature.textContent = item.main.temp; if (item.weather[i].main = "Clear"){ icon.className = "worked" } else { icon.className = " still worked" } } else if (i == 1){ tempday.textContent = "Sun"; var far = item.main.temp var kel = far * (9/5) - 459.67; temperature.textContent = Math.round(kel) + "℉"; if (item.weather[0].main === "Clear"){ icon.className = "worked" } else { icon.className = " still worked" } } else if (i == 2){ tempday.textContent = "Mon"; temperature.textContent = item.main.temp; } else if (i == 3){ tempday.textContent = "Wed"; temperature.textContent = item.main.temp; } else{ tempday.textContent = "Thu"; temperature.textContent = item.main.temp; } divForecastData.appendChild(temp1); temp1.appendChild(tempday); temp1.appendChild(icon); temp1.appendChild(temperature); } });

 <div class='weather-forecast-wrapper'></div>