index.html
<button click="submit_data" id="submit">Submit</button>
script.js
document.getElementById('submit').addEventListener('click', function () {
task = document.getElementById('new_task').value
task_deadline = document.getElementById('task_deadline').value
let push_data = {
"item": task,
"deadline": task_deadline
}
// FileSystem.writeFile("data.json", JSON.stringify(push_data));
})
I have a json file in the same directory and I am trying to push push_data to that file, but I cannot seem to find a solution.
I am not using any framework such as Angular or React.
Is it possible using plain javascript?
If not, what are the possible solutions?
You just need to use the API designed for this purposes
https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API#writing_to_files
async function saveFile(blob) {
// create a new handle
const newHandle = await window.showSaveFilePicker();
// create a FileSystemWritableFileStream to write to
const writableStream = await newHandle.createWritable();
// write our file
await writableStream.write(blob);
// close the file and write the contents to disk.
await writableStream.close();
}
function save () {
let push_data = {
"item": "test",
"deadline": "test2"
}
saveFile(JSON.stringify(push_data)).then(console.log).catch(console.error);
}
save();
Note:
This API opens up potential functionality the web has been lacking. Still, security has been of utmost concern when designing the API, and access to file/directory data is disallowed unless the user specifically permits it.
You can create a URL to download. A dataURL. See also working fiddle
var storageObj = {
"hello": "world"
}
function download_json() {
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
var dlAnchorElem = document.querySelector('.dummy');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();
}Click to download JSON on a non-sandbox environment
<form onsubmit="download_json(); return false">
<button click="submit_data" id="submit">Submit</button>
</form>
<a class="dummy"></a>