How to pass input file parameter from html page to a Javascript

Question

I created a webserver using Python Flask. My "index.html" loads a table. I am planning to create a new field "view result" to each row of the table. On clicking view result, I should be able to visualize the data. I want the filename (corresponding to each entry of "view result"), to be the input file parameter to a javascript.

Table as viewed in index.html

The filename should get passed here d3.csv("/static/<filename>.csv", function(data){...} which belongs to a file named view_data.js and data from corresponding file is visualized in another html page.

I have index.html page and view_data.js ready. How do I pass filename from index.html page to data.js for visualization?

For now I have hardcoded the filename in view_data.js.

Geekfish · Accepted Answer · 2019-03-25 12:02:25Z

Are you familiar with element selectors and events in javascript?

A simple implementation would be to set up event triggers that will fire when clicking each link, using the filename as that you store in a data attribute.

<a class="view-trigger" data-filename="filename_1.csv">view result</a>
<a class="view-trigger" data-filename="filename_2.csv">view result</a>

etc

You can set up the event using something like a specific class on each of the links (in the example view-trigger.

var resultLinks = document.getElementsByClassName(".view-trigger")

for(var i = 0; i < resultLinks.length; i++) {
  (function(index) {
    resultLinks[index].addEventListener("click", function(event) {  
       var filename = event.target.getAttribute('data-filename');
       d3.csv("/static/" + filename + ".csv", function(data){...}        
     })
   })(i);
}

I haven't tested this code so you may need to fix/adjust for your case. If you are not familiar with these concepts it's worth reading a bit more about them.

Also, d3.js also seems to come with utilities to do DOM selection and handling events, so you may want to use those instead.

Collectives™ on Stack Overflow

How to pass input file parameter from html page to a Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related