How to access a local JSON file with Javascript? - javascript

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)

Related

Search through files in path using only javascript

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.

How can i read local file from D drive in javascript

My requirement is to read the json file which contains some data and store in some other .js file.
I got task to read local file from local disk in Javascript , i have used file path like - D:\json\analytics.json.
(document).ready(){
($).getData("D:\json\analytics.json");
}
when i see in firebug it takes other url.
How I can do it, is it possible to read file from javascript.
I don't know javascript , i have seen some answer but i am not able to understand .
Need Solution , how I can achieve it. is there any other way to read file on jsp without using scriptlet . From server side , can send it on the jsp page.
I think Jaronmanda's answer won't work cause it will hit cross origin issue, see "Cross origin requests are only supported for HTTP." error when loading a local file.
As the page suggested, in general you need to serve that json file from a web service (same domain, or allow your domain to access), but it depends on what you really need to do. If you can control where that json file is stored, the easier way is to put that in a subdirectory of your html file, and do:
$(document).ready(function () {
$.get('<directory>/analytics.json', function (data) {
// Do your stuff
});
});

One JSON file is processed; an identical copy is not

We use the D3 JavaScript to initialize data documents, then build an application-specific JavaScript to process data.
A subset of the application-specific JavaScript looks like this:
drawLegend();
thousand_sep_format = d3.format(',');
d3.json("http://wafi.iit.cnr.it/webvis/tmp/dbpedia/realOntology.json", function(error, root)
More specifically it correctly processes this JSON file:
http://wafi.iit.cnr.it/webvis/tmp/dbpedia/realOntology.json
However, when we copy the original JSON file to another Linux/Ubuntu server, the copied JSON file cannot be processed.
Here is the copied JSON file:
http://www.ontomatica.com/public/test/dbpedia_ontology/realOntology.json
What is the difference between JSON-original and JSON-copied?
What is the correct process to copy an original JSON file to a new server?
Our goal is to remove sections of the original JSON file and then plot the subset. Therefore we have to put a working subset on a server.
The first site responds with an Access-Control-Allow-Origin header with the value *. That tells browsers that they should allow xhr access to the site regardless of the originating domain.
The other site doesn't do that, so the browser won't fetch the content.
The problem has nothing to do with the URLs as such, nor with the JSON content. It's a matter of server configuration, and exactly how you change that depends on the hosting environment.

CSV is too large to be processed via AJAX

I'm having a problem when sending large amounts of data through an AJAX request. I'm pulling in an XLS file from a website and attempting to pass it through an API by parsing the data. I'm doing this in VBScript/Classic ASP so there is no native function to parse XLS so I'm first attempting to convert it to a CSV file through Javascript.
I'm using something called SheetJS (http://oss.sheetjs.com/js-xls/) which is a great tool and it works just as I need it to. I can run an Excel file through it and it outputs the correct CSV data. I then try to send that data via AJAX to the ASP page with my code and I get a 500 error that I've isolated to being an issue with the file being too large. I was able to isolate to about 1652 lines of my Excel file and anything past that generates a CSV file too large to send.
All I am getting is a 500 error so I'm not really sure what else to do from this point. Is there a data limit on AJAX functions? Or is it a time limit type issue? I don't know how to find out which it is. Any suggestions on how to get a more detailed error message AND any fixes for this issue?
While you can't work with .xls files natively in VBScript, there is ADO that makes it easy to do that via COM. This way scales well wrt memory. Start your research here.

Need help about accessing a JSON file using JavaScript without the use of any servers

I'm just beginning with JavaScript and I was wondering if I can access a JSON file on the localhost without the use of any servers (like WAMP). I was planning to just read the contents of a JSON file and reflect its contents to an HTML file.
Short answer, yes you can.
Make an XMLHttpRequest against a static file such as: resources/myJSON.json (the extension is merely for organization, you can call the file whatever you want really).
Parse the response as JSON.
Obviously the file must contain a properly formatted JSON object of data, but as long as that's the case, you can load static JSON from a file to "simulate" remote connectivity to a server.
When you're browsing a file as: file:// on your system, it should treat the relative paths correctly.

Categories

Resources