Load local JSON File into a HTML template - javascript

I'm trying to load a json file into to an html template, so I can view the content in a formated way inside my browser. The json file is generated by a Java project. I already tried to do this with javascript but it seems to be that java only can fetch a json file from a server and not from a local directory. Is their any way to do this with javascript or typescript or maybe something else?


You can use fetch API to retrieve the informations of your JSON and if you use VSCode you can just launch the plugin Live Server to test it in your local directory.
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
Live Server Plugin for VSCode
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer


You can use fetch to retrieve it from a remote server or have a <input type="file" ... /> and let the user pick the JSON file using the "Open File" file browser dialog.
You can also include the JSON file from disk at compile-time when compile the application using TypeScript.
There are also the File API, FileReader API, and FileSystem API to manage files locally on disk at runtime. But these might only be able to read files written by the web browser that reside in certain locations and might not be able to access any file on file system due to security and sandboxing.

Related

How can I read a local file with a fixed path in Javascript? I only have the location of the file as a string. NO HTML forms allowed

I am creating a web app where I already know the location of a file that needs to be uploaded. Note that all I have is the path (example: Users/username/Downloads or Users/username/Documents) or something like that. How can I get Javascript to read that file as a File object or as a binary string so that I can POST it to a server.
Additionally, this file is not a simple file like a JSON or a txt file. This file would usually be a Microsoft Word file.

Due to security reasons, JavaScript executed from web apps have very limited access to the file system.
The best you can do is have the user select a file via a file input.
If having the web app user install a browser extension is acceptable, a browser extension may have more access to the user's file system. Here is an example extension that accesses a user's file system more directly: https://github.com/buggyj/savetiddlers

I think you can't to read the any files from the front-end by javascript, It is not allowed to do so. But you can get the file path from front-end and then pass it to the app framwork or back-end to processing. Beacuse the app's framework or back-end has the ability to access system files. Whereafter, you can POST to the contents of the file to the web server.

How to save file in HTML FileSystem API using mt-downloader?

I am using mt-downloader to download and save files from server. It works fine when i save the file in system filesystem like
/var/datafiles/filename.ext
But i am getting error when i try to save the file using HTML Filesystem API. It says
Error: Invalid File Path

Go with
https://github.com/eligrey/FileSaver.js/
the HTML Filesystem API is still not standart

Html 5 file upload and how to send a file from a browser to backend

I've seen a few tutorials of how to use Html5 File API such as this https://www.html5rocks.com/en/tutorials/file/dndfiles/ for file uploading. What I want is a few pointers of how to send all that from a browser to backend and process it there to actually upload files. In those tutorials it's not shown.
The backend language doesn't matter.
And I don't want to use an external js library, only pure javascript.

Can i upload and save an image file in file system ,and retrieve it back with javascript or HTML?

I am creating a webpage, which will be running locally.It will upload a file from local file system and save it in a specific location in that file system.But I do not want to use any language which require any other installation such as DBMS or web host e.g. JavaScript or Ajax which do not require any installation and can be processed by the browser only.

No. You cannot normally access to filesystem with client-side Javascript.
But! ..
.. you can with Javascript on server
(NodeJs with FS API http://nodejs.org/api/fs.html)
.. and you can, but only in Chrome and only with chrome.fileSystem api.
http://developer.chrome.com/apps/fileSystem.html
Manual on HTML5rocks - http://www.html5rocks.com/en/tutorials/file/filesystem/

read file and display content in javascript

I need to save some data in a file and when loading the page i want to read this file and add this data to the page. I don't know why but this assignment is useless so we can't use database nor server stuff, so i have to save and read from a local file.
I searched the net and found knew that it is not allowed to access files directly from javascript but using the FileAPI in HTML5 i can select a file to read.
So my question is how is this done because there are no resources about this, i simply need to
read a file and into a string.
Thanks,

For using the File API (HTML5) including reading/writing the content of local files and some sample source code see these links:
https://developer.mozilla.org/en/Using_files_from_web_applications
http://www.html5rocks.com/en/tutorials/file/dndfiles/
https://developer.mozilla.org/en/DOM/FileReader
http://www.w3.org/TR/file-writer-api/
http://www.html5rocks.com/en/tutorials/file/filesystem/
You should be aware that not all borwser/versions support all of the above AND that access to local filesystem depends on security settings...

Categories

Resources