For some reason my forecast API is not displaying like my weather API and the UV API. I'm successfully fetching the data for forecast and I don't have any errors ..........................................................................................................................................................................
function cityInput(event) {
console.log(event)
city = $("#inputCity").val().trim()
// Fetch weather API
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`)
.then((response) => response.json())
.then((data) =>{
console.log(data)
// Adding fetch data to variables
activeCityVal = data['name']
activeTempVal = data['main']['temp']
activeWindVal = data['wind']['speed']
activeHumiVal = data['main']['humidity']
weathrIconVal = data['weather'][0]['icon']
activeLatitude = data['coord']['lat']
activeLongitude = data['coord']['lon']
// Removing decimal points
activeWindVal = Math.trunc(activeWindVal)
activeHumiVal = Math.trunc(activeHumiVal)
// Kelvin to °F convertion
activeTempVal = ((activeTempVal - 273.15) * 1.8) + 32;
activeTempVal = Math.trunc(activeTempVal)
//Display fetch data
$("#actCity").text(" " + activeCityVal)
$('#temp').text(" " + (activeTempVal) + '°F');
$("#humidity").text(" " + activeHumiVal + "%");
$("#wind").text(" " + activeWindVal + "mph");
$(".weatherIcon").attr(
"src",
" http://openweathermap.org/img/wn/" + weathrIconVal +"@2x.png"
);
// 5 day forecast header
$("#date").text(moment().format('ll'));
console.log($("#date"))
Lat = activeLatitude
Lon = activeLongitude
// Fetch 5 day forcast API (not displaying)
fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${Lat}&lon=${Lon}&appid=${key}&exclude=minutely,hourly`)
.then(response => response.json())
.then(data =>{
console.log(data);
var days = 0;
// Adding function for pull and display of 5 day forecast (not displaying)
for(let i = 6; i < 40; i += 8) {
var forecast = data.list[i];
var futureTemp = forecast.main.temp
var futureHum = forecast.main.humidity
var futureWind = forecast.wind.speed
var [date] = forecast.dt_txt.split(" ")
var icon = forecast.weather[0].icon
// Temperture convertion to °F and removing decimal points
futureTemp = ((futureTemp-273.15)*1.8)+32;
futureTemp = Math.trunc(futureTemp)
futureWind = Math.trunc(futureWind)
// Display content in 5 day forecast (not displaying)
$("#date" + days).text(date);
$("#temp" + days).text(futureTemp);
$("#humidity" + days).text(futureHum);
$("#wind" + days).text(futureWind);
$(".weatherIcon" + days).attr(
"src",
" http://openweathermap.org/img/wn/" + icon +"@2x.png"
);
days++
}
})
})
});
}
// Calling functions
$("#searchBtn").on("click", cityInput);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B4 The Storm</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!-- _________________ Top of the page _________________ -->
<header class="jumbotron container-fluid mt-2 text-center p-2" style="background-image: linear-gradient(to right, orange, navy); color:gold;">
<h1>Before <span class="h1Effect">The Storm</span></h1>
</header>
<!-- _________________ Main content (Weather info) ___________________ -->
<div class="container mt-5">
<div class="row">
<!-- _______ City search _______ -->
<div class="col-4" id="searchCity">
<h3 class="top-1">Search a City:</h3>
<div class="input-group">
<input type="text" class="form-control" id="inputCity" placeholder="Panama City...">
<div class="input-group-append">
<button class="btn bg-primary text-light" id="searchBtn"><i class="fa fa-search"></i></button>
</div>
</div>
<button class="btn btn-danger mt-2" type="button" id="clearHistory">Clear history</button>
<ul class="list-group" id="searchHistory">
</ul>
</div>
<!-- ______ Active/present Weather ______ -->
<div class="col-8" id="actWeather">
<div class="row border border-warning rounded">
<div id="cityInfo" class="col-sm-12">
<h3 class="cityName bold" id="actCity"><span id="date"></span></h3>
<img class="weatherIcon"/>
<p>Temperature:<span class="current" id="temp"></span></p>
<p>Wind:<span class="current" id="wind"></span></p>
<p>Humidity:<span class="current" id="humidity"></span></p>
<p>UV index:<span class="current" id="Uv"></span></p>
</div>
</div>
<!-- ______ Future 5 day Forecast ______ -->
<div class="col-sm-12 mt-3" id="futureWeather">
<h2>5-Day Forecast</h2>
<div class="row text-light">
<div class="col-sm-2 bg-primary forecast text-white m-2 rounded">
<h5><span id="date0">5 Day Forecast</span></h5>
<p></p>
<p>Temp:<span class="temp0"></span></p>
<p>Humidity:<span class="hum0"></span></p>
<p>Wind:<span class="wind0"></span></p>
</div>
<div class="col-sm-2 bg-secondary forecast text-white m-2 rounded">
<h5><span id="date1">5 Day Forecast</span></h5>
<p></p>
<p>Temp:<span class="temp1"></span></p>
<p>Humidity:<span class="hum1"></span></p>
<p>Wind:<span class="wind1"></span></p>
</div>
<div class="col-sm-2 bg-secondary forecast text-white m-2 rounded">
<h5><span id="date2">5 Day Forecast</span></h5>
<p></p>
<p>Temp:<span class="temp2"></span></p>
<p>Humidity:<span class="hum2"></span></p>
<p>Wind:<span class="wind2"></span></p>
</div>
<div class="col-sm-2 bg-secondary forecast text-white m-2 rounded">
<h5><span id="date3">5 Day Forecast</span></h5>
<p></p>
<p>Temp:<span class="temp3"></span></p>
<p>Humidity:<span class="hum3"></span></p>
<p>Wind:<span class="wind3"></span></p>
</div>
<div class="col-sm-2 bg-secondary forecast text-white m-2 rounded">
<h5><span id="date4">5 Day Forecast</span></h5>
<p></p>
<p>Temp:<span class="temp4"></span></p>
<p>Humidity:<span class="hum4"></span></p>
<p>Wind:<span class="wind4"></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ______ Jscript file _______ -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="./assets/js/script.js" async defer></script>
</body>
</html>