Okay, so im currently building a webpage, that fetches and displays weather data from API. Using live server in vscode, all works and is displayed correctly. However, when i deployed to github pages, it doesnt fetch data from API, hence it leaves my js built dynamic table unfilled, and my chart.js wont display at all, because there is nothing to display. Im a novice in programming, so i cant figure out why this doesnt work. I have double checked all filepaths, enabled mixed content by including <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> (due to my API being http), and triple checked my js file. Devtools network tool shows that it doesnt try to fetch anything. Js is properly linked and accepts logs.
Currently project is displayed at https://krisbis.github.io/WeatherApiUI/ . Im trying to solve “temperature.html” & “windspeed.html”, which both are built similarly. Heres snippet of my js fetch:
`async function fetchTempTwenty(table) {
try {
const response = await fetch(tempTwentyAPI);
const apiData = await response.json();
// Extract the temperature values from the API data
const temperatures = apiData.slice(-20).map((data) => data.temperature);
const times = apiData.slice(-20).map((data) => data.date_time);
console.log(temperatures);
// Create the Chart.js chart
const canvas = document.getElementById("myChart");
const chart = new Chart(canvas, {
type: "line",
data: {
labels: [...Array(20).keys()].map((i) => `Reading ${i + 1}`),
datasets: [
{
label: "Temperature",
data: temperatures,
backgroundColor: "cyan",
borderColor: "cyan",
borderWidth: 1,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
// Create the table of information
const tableHead = table.querySelector("thead");
const tableBody = table.querySelector("tbody");
tableHead.innerHTML =
'<tr><th scope="col">#</th><th scope="col">Time</th><th scope="col">Temperature</th> </tr>';
tableBody.innerHTML = "";
for (let i = 1; i < times.length; i++) {
const t = times[i];
const c = temperatures[i];
const cellElement = document.createElement("tr");
cellElement.innerHTML =
'<td scope="row">' +
i +
"</td><td>" +
convertTime(t) +
"</td><td>" +
c +
" °C" +
"</td>";
tableBody.appendChild(cellElement);
}
} catch (error) {
console.log(error);
}
}
// Conditional call for the function - could've done it inside
// the code block, but this seemed to bring more clarity to code
if (window.location.pathname === "/temperature.html") {
window.addEventListener(
"load",
fetchTempTwenty(document.querySelector("table"))
);
}`
Heres html:
<!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" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./css/stylesheet.css" type="text/css" />
</head>
<body>
<div class="hero">
<nav
class="navbar navbar-expand-sm navbar bg-transparent"
id="custom_navbar_styles"
>
<a href="./index.html" class="navbar-brand mx-4 p-0"
><div class="text-black-50 h2">Weather</div></a
>
<button
class="navbar-toggler navbar-light"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="main-navigation" class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto text-center mx-2">
<li class="nav-item">
<a class="nav-link" href="./last50readings.html"
>Last 50 readings</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./windspeed.html">Windspeed</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./temperature.html">Temperature</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">-</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">-</a>
</li>
</ul>
</div>
</nav>
</div>
<br />
<br />
<div class="chart_container d-flex">
<canvas id="myChart"></canvas>
</div>
<br>
<br>
<div class="container d-flex">
<table class="table table-hover table-striped table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Time</th>
<th scope="col">Temperature</th>
</tr>
</thead>
<tbody>
<!-- Dynamic table from JS -->
</tbody>
</table>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./js/script.js"></script>
<script src="https://krisbis.github.io/WeatherApiUI/js/script.js"></script>
</body>
</html>