This question already has answers here:
Javascript read file without using input
(3 answers)
Closed 1 year ago.
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.
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 :)
Related
I'm coding a webpage that needs to read some data from different csv on a path depending on the country of the user.
the path is something like this:
./csv/m2-2022-10-25_13_45_55_es.csv
m2-2022-10-25_13_45_56_fr.csv
m2-2022-10-25_13_46_04_it.csv
etc
And those files will be replaced regularly, the only that we'll always have is the country code (es, fr, it, etc).
So, what I need is to list all the files on the path to an array, and loop through the array to find if the last characters of the filename are $countryCode + ".csv", and there run some code.
But I can't find how, all the solutions I find are using Node.js, but are there a solution using only Javascript (or jQuery)?
Regards!
You cannot use pure Javascript to do that, because if you wanted to search files in your computer only using javascript, it would be a huge security breach.
You must use node.js to open files but you can make an API to your nodejs file from your javascript and you can send as a response the content of your file.
Here some links that might help you :
FS : https://nodejs.org/api/fs.html
NodeJS api : https://medium.com/swlh/how-to-create-a-simple-restful-api-in-node-js-ae4bfddea158
You can check a similar question here:
Get list of filenames in folder with Javascript
You can't access to filesystem from the frontend, this it would be a huge security breach, because anyone could access to your filesystem tree.
You have to do a function in backend to build the array you want and send it to frontend.
If you create a function in backend file that returns the array of files in the folder, you can call it from the frontend via XMLHttpRequest or Fetch to get the array in frontend and be able to use in your js file.
I have imported a JS file that purely is used to contain data. I want to be able to push changes to the data file, is this possible client / browser side only or do I need to use PHP / Python / Node?
<script src="datafile.js"></script>
Data File Contents:
var data = {"someValue":{"someOtherValue": "yeah"},
"anotherValue": [{"key": "value"},{"key": "value"}]}
So in brief to answer my own question based off the answers here:
Editing a file via a client side language is impossible and would
pose a security threat to the server.
If I would like to update the data in the file I will need to use a server side language as I have mentioned. PHP is what I will
be using in my case. My html file will just become a .php and will
listen for $_GET['idToChangeInJSONFile'].
Another option is that I could store the data in localStorage and be able to manipulate from there. This however is not consistent
and would get cleared when a different browser is used or the
browser is reset.
This question already has an answer here:
How to get Chrome command line switches from js
(1 answer)
Closed 3 years ago.
Is there any way to start a browser with arguments and read them with JavaScript.
e.g. something like that: chromium-browser -test=123
dummy-js: var test = browser["test"];
You can start browsers from the command line however as you usually do not need to pass arguments to JS in that way, there is no built in way to do that (directly). However, you can use the URL to pass in some information:
firefox https://example.com?test=123
That can then easily be accessed from within JS.
For any randomly loaded page accessing the launch parameters of the browser - NO.
And it shouldn't either.
If you want to get the launch parameters from the startup web page, launch it with ural parameters. They are easily accessible from within JS.
If you want any other web page you are managing to access the launch parameters:
Launch the browser with local html file with url params.
This file should read the url params and save them in the localStorage
Any other web page which would like to access these params should:
3.1 Contain a hidden iFrame which points to the first local html file
3.2 Have a function in that file to read the localStorage and do postMessage to the parent window.
I have an HTML file with JavaScript that I am running without any Webserver/host so I am just opening the file in a browser local to my windows PC. In that HTML file I would like to be able to read a text file in the same folder as the html file. That file will contain data in rows and columns separated with tabs. i.e
1 a
2 b
3 c
I want to keep this as simple as possible so all I have to do is share the HTML and Text file to others so the can open it up local to their computer without any webserver/host and without having to also copy of external libraries like node.js or jquery.
I have searched and tested everything I can find but either I need to reference an external library or I have to run it in a webserver or I need to click a button to load the file through the browser, none of what I want.
Does native JavaScript support the function to read a text file and save it to an array? If so, any code direction would be great.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
XMLHttpRequest() exists in native JavaScript, I think it will help you.
You also can send a request to the file. Or use library: axios.js because when you use XMLHttpRequest() you lose many time to write code which just get content from file, with axios I got file content with one line: `axios.get('file.txt').then(result => console.log(result.data));
To connect Axios: <script src="https://unpkg.com/axios#0.18.0/dist/axios.min.js"></script>
You can read official documentation about axios.js and XMLHttpRequest() in the net.
I have a Python program that generates an html page for reporting results. The html page is saved in an output directory on disk alongside a javascript file that helps with dynamic table handling. I also save a JSON file to this output directory that I would like to read in with my javascript file. This JSON file has data from the Python run (saved dictionary) that I would like to be able to access. So in an output directory on disk I have:
C:/somedirectory/output/report.html
C:/somedirectory/output/tables.js
C:/somedirectory/output/data.json
All files have been created from my program.
My html page has a table with checkboxes and if those checkboxes are selected I would like to update a second table based on data saved in the JSON file. Thus I would like to open my html report in any browser and read in the JSON file as a javascript object.
I have been trying to use ajax and .getJSON but am getting the
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I have searched and seen many similar problems but have not come across anything that quite fits what I need. Thoughts and a work around would be greatly appreciated. Thanks.
Update
Since everything is run locally on the client side I have decided to embed the JSON data (python dictionary) and javascript code directly into the html report output. This way the data is internally accessible and the html file can be passed around without dependency issues. The user with the answer I selected below has a link that eludes to this solution.
JavaScript runs on the client machine, hence it can only access files on the client machine using a special setup.
If you want it to read JSON on your server, you should use the path:
http://example.com/output/data.json
Better way would be to read/write JSON file from Python and then send the table data to JavaScript as in this answer: Send data from Python to Javascript (JSON)