Dynamically load data in javascript

Question

4.00/5 (1 vote)

See more:

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:

JavaScript

<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

Posted 18-Jun-19 19:19pm

franciskane

Updated 19-Jun-19 3:09am

Add a Solution

Comments

Afzaal Ahmad Zeeshan 19-Jun-19 4:48am

And the problem is?

franciskane 19-Jun-19 4:51am

I'll just ellaborate here. My python script processes 3 parameters (rainfall, wind and temperature. they are all saved as images) and they all are saved in subfolders inside my var/www/html (ie. /var/www/html/ops/Prate/). I want to know how to load my script's outputs to my web portal using java script. I don't want to define filenames because it needs to be "dynamic" meaning what is processed by the script. that will be displayed in my portal. Sorry for grammar. english is not my first language

Afzaal Ahmad Zeeshan 19-Jun-19 5:21am

It seems as if you want to scan the directories and then get the results from the files. Right?

Perhaps, you need to check how you can use the directory or file helpers. :-) You using PHP in the background?

#realJSOP 19-Jun-19 9:03am

You can't scan server-side folders from javascript, because it's a client-side technology.

Afzaal Ahmad Zeeshan 19-Jun-19 10:32am

You can't, that's why I asked if he was using JavaScript or PHP on server-side so that he can check the directories.

franciskane 19-Jun-19 5:25am

Yes. But the files to be loaded by the js. changes every 3 hours or everytime I run my python script.

I don't use PHP here. I just use PHP in the login of my website and that's it.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

#realJSOP · Answer 1 · 2019-06-19T03:09:00

Solution 1

If it were me, I'd establish files with static names, and copy the newest files (that the python script generates) to files with the static names. At that point, you simply load the same file names every time, which completelty eliminates the need to scan the folder.

Posted 19-Jun-19 3:09am

#realJSOP

Updated 19-Jun-19 3:10am

v2

Comments

franciskane 19-Jun-19 9:35am

I can't do that because I need the filenames. I use them to provide more information about the image. As you can see from the code above. But thank you for your suggestion

#realJSOP 19-Jun-19 10:31am

Using filenames to provide info is a patentedly BAD idea. Write a new python script that saves your required into an actual database instead - that is the only reaql solution to your problem.

franciskane 19-Jun-19 17:13pm

Is it still a bad idea if my web portal is not really gonna be available in the www?. It is just available within the network here in our office

#realJSOP 20-Jun-19 6:52am

Regardless of its inteded use, there are much better ways to do what you're trying to do.

Given that you already have a pythong script that creates the files, there's no reason you can rewrite the python script to still generate the files, but put the "info" into a database. In the time you've spent responding to my answer, you could have already implemented such a change, and gotten on with the rest of the project.

Dynamically load data in javascript

1 solution

Solution 1

Add your solution here

Preview 0

Dynamically load data in javascript

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us