'Writing API data to document using Electron

I am developing a simple weather application using Electron in order to better learn JavaScript. I've followed the getting started tutorial and am now incrementally adding some functionality.

I've followed documentation suggesting that any scripts that modify the HTML document should be placed in a script tag before the closing body tag of that document:

  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <h1>Weather for the next 24 hours</h1>
    <h3>In two minute increments</h3>
    <span id="weather_object"></span>
    <script src="./getWeather.js"></script>
  </body>

Now I've made a simple script that should write the response of an API call to the weather_object span:

// getWeather.js

var request = require('request');

var log = require('electron-log');
log.transports.file.level = 'info';
log.transports.file.file = __dirname + 'info.log';

log.info("getWeather.js entered");

var lat = '46.87';
var long = '-113.9952';
var url = "https://api.open-meteo.com/v1/forecast?latitude=".concat(lat, "&longitude=").concat(long, "&hourly=temperature_2m");

var weather_span = document.getElementById('weather_object');

request(url, function (error, response, body) {
    if (error) {
        console.log('error:', error);
    }
    else {
        var weather = JSON.parse(body);

        // neither body or weather will write to document 
        weather_span.innerHTML = weather;

        log.info('weather:', weather);
    }
});

The problem is that this script doesn't seem to execute at all. No log file is created, and nothing is written to the weather_object span. I've confirmed a valid API response for the request is received.

Additional files created in the getting started tutorial are below:

// preload.js
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

// main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}


  app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
      })
  })

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

javascript electron

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Writing API data to document using Electron

Sources

Related Questions