1

I am trying to create a members badge draw for a club.

I have 1000+ records in "members.csv" containing "memNumber, lastName, firstName" and "expiryDate".

I can manually load the "members.csv" file using the <input> method in "index.html" then with "script.js" turn the data into an array and retrieve a random members details.

This will only be run locally on one PC using a "Task Scheduler" and won't be published online.

My "index.html", "script.js" and "members.csv" files are all in the same folder.

How can I load "members.csv" automatically on page-load rather than using the <input> method ?

Any help would be appreciated. Cheers, Vince.

Vincent Porter
  • 13
  • 5
  • If you've a local server, then you could use AJAX. If you're working with file protocol, then it's not possible. Instead of csv file you could save the data in js file as a JavaScript object or array, that way it's possible to load the data using a regular script tag also in a local system. – Teemu May 18 '21 at 13:53
  • Run your own local Apache server like XAMPP or WAMP and run the page on `localhost`. – Mr. Polywhirl May 18 '21 at 13:53
  • There doesn't seem to be any reason to use an HTML document for this. Write your code using Node.js instead. – Quentin May 18 '21 at 14:44
  • Problem Solved; I used the method at https://sebhastian.com/javascript-csv-to-array to convert "members.csv" to an array, copied the array into "members.js" then added "members.js" before "script.js" in my html file. Now both js files get loaded when the page is run. Thanks to Alvian for his 2nd solution and pointing me in this direction. – Vincent Porter May 19 '21 at 08:15

1 Answers1

1

there is some ways you can do to solve this problem. Main problem is to have the data from members.csv on page load. All of the solutions below already mentioned on the comment section, but i just want to clear it out a little bit.

To have access to local file (including your members.csv), browsers have some strict rules related to security (unless the one that needs user interaction such as the <input>)

First Solution: using AJAX and install a local server

By using AJAX, the javascript can request the csv file using HTTP Protocol (rather than File Protocol) on localhost on page load.

After that, you can process the file as you've previously processed.

Second Solution: convert it to JavaScript Object

If the file is static (rarely-changed) and you don't want to install any local web server, then you can convert the csv file into javascript object using some free online services like CSV to JSON.

After that, you copy the converted result from the service and assign it to a variable. Then, you can process it.

Hope this answer helps you :)

Alvian Kosim
  • 71
  • 3