Data from external API

The template typically receives data from the controller application to display on-screen. However, there are instances where you might want the template to incorporate additional logic. In this tutorial, we'll demonstrate how to enhance a template to display both the current time and weather conditions without relying on a third-party controller application.

Prerequisites

To obtain weather information, we'll utilize the openweathermap.org API. You can choose any API, but we'll use this one for demonstration purposes. You'll need to create an account on openweathermap.org and obtain an API key. Note that it may take 1-2 hours for the key to become active. Refer to the API's documentation for details and be aware of usage limitations for the free tier.

Create two Text elements in the composition: one for displaying time and one for displaying weather. Assign _time and _weather keys to them.

All the code provided in this example should be placed in the composition action to execute immediately upon the template's loading.

Display time

To fetch the current time, we'll utilize JavaScript's Date object, specifically its toLocaleTimeString method that will return us a formatted human-readable time. Refer to the docs for more information about formatting the time.

const readableTime = new Date().toLocaleTimeString();

Now all we have to do is set the content of the _time element to formatted time.

const timeEl = this.findElementByKey("_time");
const readableTime = new Date().toLocaleTimeString();
timeEl.setContent(readableTime);

Since this code will need to be executed every second, and not only once when the template loads, we'll wrap it in a function so that it can be called every second. And to achieve that, we'll use Javascript's built-in setInterval function. Note that there is no need to wrap timeEl in the function since we need to find that element just once - it won't change anymore.

const timeEl = this.findElementByKey("_time");

function setTime() {
  const readableTime = new Date().toLocaleTimeString();
  timeEl.setContent(readableTime);
}

setTime();
setInterval(setTime, 1000);

Display weather

Fetching weather information involves making API calls, parsing results, and displaying desired information. Built-in fetch function can be used for requesting the weather data. In this example, we'll display the city name and current temperature in Celsius degrees.

const weatherEl = this.findElementByKey("_weather");

const apiKey = "YOUR_API_KEY";
const response = await fetch(
  "https://api.openweathermap.org/data/2.5/weather?lat=43.5147&lon=16.4435&appid=" +
    apiKey
);
const weather = await response.json();

const kelvin = weather.main.temp;
const celsius = Math.round(kelvin - 273.15);
const city = weather.name;
const final = `${city} ${celsius}°C`;
weatherEl.setContent(final);

We probably want to keep fetching this information every few minutes, just like we do for the time. We can wrap the code in the new function and use setInterval function again.

const weatherEl = this.findElementByKey("_weather");

async function setWeather() {
  const apiKey = "YOUR_API_KEY";
  const response = await fetch(
    "https://api.openweathermap.org/data/2.5/weather?lat=43.5147&lon=16.4435&appid=" +
      apiKey
  );
  const weather = await response.json();

  const kelvin = weather.main.temp;
  const celsius = Math.round(kelvin - 273.15);
  const city = weather.name;
  const final = `${city} ${celsius}°C`;
  weatherEl.setContent(final);
}

setWeather();
setInterval(setWeather, 60000);

Final code

Combine both functions into the composition action to display both time and weather continuously.

const weatherEl = this.findElementByKey("_weather");
const timeEl = this.findElementByKey("_time");

async function setWeather() {
  const apiKey = "YOUR_API_KEY";
  const response = await fetch(
    "https://api.openweathermap.org/data/2.5/weather?lat=43.5147&lon=16.4435&appid=" +
      apiKey
  );
  const weather = await response.json();

  const kelvin = weather.main.temp;
  const celsius = Math.round(kelvin - 273.15);
  const city = weather.name;
  const final = `${city} ${celsius}°C`;
  weatherEl.setContent(final);
}

function setTime() {
  const readableTime = new Date().toLocaleTimeString();
  timeEl.setContent(readableTime);
}

setWeather();
setTime();
setInterval(setWeather, 60000);
setInterval(setTime, 1000);