I'm successfully fetching the data for forecast but it's not displaying

Viewed 31

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>
0 Answers
Related