Javascript Fetch API in embedded html

I have a display in Xibo. In that display I have a single container that takes the entire width and the entire heigth. In that container I have an ‘embedded’ element with html and styles.

In the ‘head’ I have javascript that runs when all the HTML DOM elements have loaded. in this javascript, two API urls are fetched: https://openweathermap.org API. Secondly, a RESTFul api i have made myself in a Digital Ocean droplet. This is a NodeJS app and just accessible via any browser.

i run a sync function in the embedded: function async fetchData() {
let result = await fetch(‘url’);
do something with result
}

the data in the html is set equal to the api results.

When previewing the layout, everything is fine. However, when actually asigning the layout to a display, nothing is loaded. I copied the source code for the display and pasted it in a index.html and tried opening that in the browser: everything loaded normally.

Anyone know if there is any problem with Fetch API for Xibio or if I should take a different approach?

Many thanks

CMS V: 1.8.1

I figured it out and it is quite simple. Leaving this if anyone has the same problem:

  • Xibo used internet explorer for the displays (2025 can’t come soon enough)
  • Internet Explorer doesn’t support Fetch API and ES6
  • You need to use a Polyfil Fetch instead: https://github.com/github/fetch
  • You need to use Babel REPL to convert any ES6 to vanilla

Mozilla developer has a good table for every javascript function if it’s supported by browsers