Writing a json object to a text file in javascript – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and json. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Writing a json object to a text file in javascript.
Problem :
I have a JSON object in javascript. I want to simply write the JSON object to a text file. From the things that I came across so far indicate that it is not possible to do so because of security concerns on the client side. Is there a workaround?. Will it be possible to modify a file already present if put some dummy values initially?
Thanks
Solution :
One thing you can do is setup the JSON as a download on the fly.
var data = "{name: 'Bob', occupation: 'Plumber'}";
var url = 'data:text/json;charset=utf8,' + encodeURIComponent(data);
window.open(url, '_blank');
window.focus();
Working demo: http://jsfiddle.net/sLq3F/
Apart from that, you can’t write a JSON to a file on the clientside due to security reasons. (Otherwise you have access to the filesystems of your website’s users.) You would have to use a server-side language for this, and store the file on the server-side.
Correction: Looks like you can write to a file, i.e., a “sandboxed section” of the user’s filesystem. See Kevin Jantzer’s comment below.
Another Correction: Sorry, the Filesystem API isn’t in use. From the HTMl5Rocks website: “In April 2014, it was announced on public-webapps that the Filesystem API spec should be considered dead. Other browsers have showed little interest in implementing it.”
Perhaps this solution is a little more elegant, tested in Chrome, FF and ie7 to ie10, tested with text, JSON, PDF and XLS data (using the appropriate content type)
Either supply the saveFile() function with a data blob, or create a data blob on the fly with type set to nothing and your data between the []‘s
In this example, we’ll just stringify the settings object, and set the datatype correctly.
settings = { any_kind_of_object: true };
json_str = JSON.stringify(settings);
saveFile('yourfilename.json', "data:application/json", new Blob([json_str],{type:""}));
function saveFile (name, type, data) {
if (data != null && navigator.msSaveBlob)
return navigator.msSaveBlob(new Blob([data], { type: type }), name);
var a = $("<a style='display: none;'/>");
var url = window.URL.createObjectURL(new Blob([data], {type: type}));
a.attr("href", url);
a.attr("download", name);
$("body").append(a);
a[0].click();
setTimeout(function(){ // fixes firefox html removal bug
window.URL.revokeObjectURL(url);
a.remove();
}, 500);
}