Dynamically load data in javascript

See more:

Javascript

I have some code that I will show below and I want to dynamically load some images using javascript. The images to be loaded are coming from my python script and will be processing some data every 3 hours after the process from the python is done. The output image is then displayed in a website. So the input of the images needs to be dynamic.


The code below is just a scratch because I have no prior knowledge on how to use javascript. and the

let listofImages

part is how I "manually" load the images. any help will be greatly appreciated.

What I have tried:

<script>
function playImages(parameter) {
var path = "";
if(parameter == "precip") {
path = "path to the precip folder" 
else if(parameter == "temp") {
path = "path to the temp folder"
} else {
path = "path to the wind folder"
}
let listOfImages = [ 
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00000.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00100.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00200.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00300.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00400.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00500.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00600.png"
];

let currentKey = 0;
let sizeOfImages = listOfImages.length;

setInterval(function(){
let strSplit = listOfImages[currentKey].split('-');
let removeOtherText = strSplit[1].replace("postwrf_d01_","").replace(".png","");
let dateSplit = removeOtherText.split('_');

$("#img-container").attr('src', listOfImages[currentKey]);
$("#img-container").attr('data-key', currentKey);
$("#date").text(dateSplit[0] + ' ' + dateSplit[1] + ' '  + dateSplit[2]);
currentKey = currentKey + 1;

if(currentKey == sizeOfImages) {
currentKey = 0;
}
},1500);
}

playImages("precip");
let strSplit = "prate_rpnprate- postwrf_d01_20180923_0600_f00000.png".split('-');
let removeOtherText = strSplit[1].replace("postwrf_d01_","").replace(".png","");
let dateSplit = removeOtherText.split('_');
console.log(dateSplit[0]);
console.log(dateSplit[1]);
console.log(dateSplit[2]);

</script>

In my html this is the part that handles this js code:

<span id="date"></span>
<img src="" id="img-container" width="650" height="700" data-key="0" />

The handles the outputs a string depending on the filename of the image