Printing a HTML + JavaScript variable from an external js to an index.html file using fetch + node.js

I was under the impression I could use node.js to do this but you cannot b/c of reasons given by the answer. Essentially I just wanted to use fetch and that’s all you really need. Here is a very basic way of using it.

async function fetch_weather() {
    const response = await fetch('https://api.openweathermap.org/data/2.5/weather?zip=90210,us&appid={API-KEY}&units=imperial');
    const weather = await response.json();
    document.querySelector("#weather").innerHTML =

<table>
<caption>Current weather data using <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch" target="_blank"><code>fetch</code></a></caption>
<br>

<thead>
  <tr>
    <th>City/State</th>
    <th>Current Temp</th>
    <th>Feels Like:</th>
    <th>Longitude:</th>
    <th>Latitude:</th>
    <th>Sunrise (Unix)</th>
    <th>Sunset (Unix)</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>${weather.name}, GA</td>
    <td>${weather.main.temp}</td>
    <td>${weather.main.feels_like}</td>
    <td>${weather.coord.lon}</td>
    <td>${weather.coord.lat}</td>
    <td>${weather.sys.sunrise}</td>
    <td>${weather.sys.sunset}</td>
  </tr>

</tbody>
</table>

};

Here was the non-working node.js code:

index.js

import fetch from './node-fetch';

async function fetchWeatherJSON() {
    const response = await fetch('https://api.openweathermap.org/data/.../&appid={API-KEY}');
    const weather = await response.json();
    return weather;
}

fetchWeatherJSON().then(weather => {
document.querySelector("#weather").innerHTML = `Longitude: ${weather.coord.lon}`
    console.log(`Longitude: ${weather.coord.lon}`);
    console.log(`Latitude: ${weather.coord.lat}`);
    console.log(`Current Temp: ${weather.main.temp}`);
    console.log(`Feels Like: ${weather.main.feels_like}`);
    console.log(`Sunrise: ${weather.sys.sunrise}`);
    console.log(`Sunset: ${weather.sys.sunset}`);
    console.log(`City/State: ${weather.name}, GA`);
});

Inside fetchWeatherJSON().then(…) part I tried things like

document.querySelector("#weather").innerHTML = `Longitude: ${weather.coord.lon}`;

but none of those types of ways worked. I have no idea if there is just something I am doing wrong here as far as selectors or this isn’t the best way (or any way) to do it.

I’d like to print this to an index.html page, here is a simple example of some HTML. It would be nice to be able to print whatever is shown the javascript console inside the opening an close <p> elements.

index.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">
    <title>Node.js Weather App</title>
</head>
<body>
    <h2>Node.js Weather App</h2>
    <div id="weather"></div>

    <script type="text/javascript" src="index.js"></script>
</body>
</html>

Answer

This code cannot work. Not on node.js nor on the browser because:

Node.js has no fetch built in, so you need an extra library for it. For this you use node-fetch. But in the same .js file you try to access DOM elements with document.. Dom elements does not exist in Node.js, only inside the browser.
This code wont work, because usually you have an bundler like Vite or webpack that bundles your npm packages. Anyway, node-fetch is only made for Node.js, not for the browser.

The browser already has an built-in fetch.

Advertisement

Answer