Is it possible to write data to a locally json file with nothing but angular?

Question

I'm trying to write data to a json file after hitting "Submit" on an html formly-form using only angular, but nothing is happening. I know I can read a json file using angular but not sure on creating files. onSubmit() in controller:

function onSubmit() {     $scope.save = function() {         $http.post('./temp/sample_data.json', JSON.stringify($scope.model)).then(function(data) {             $scope.msg = 'Data saved';         });     }; }; 

html:

<form name="form" ng-submit="onSubmit()" novalidate>     <formly-form model="model" fields="fields"></formly-form><br/>     <button type="submit">Submit</button> </form> 

The sample_data.json isn't created and if I create an empty file it does not fill up with the data as well. The $scope.model defenitly contains data. If anyone can help, it will be very appreciated. Thanks, Alon.

Answer 1

Is it possible to write data to a locally json file with nothing but angular?

No. Even if you're running the page from the local file system (e.g., file://myfile.html) or from a local webserver (e.g., http://localhost/myfile.html or http://host-on-my-intranet/myfile.html), you still have no means of directly writing to a file from browser-hosted JavaScript code.

Two choices:

1. Send it to something (e.g., a server) that can write it out, or

2. Provide it as a data: URI (if feasible in your case) that the user can right-click and choose "save as..."

   Here's how you create a data: URI for some JSON text:

   var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON); 

Full Example of #2:

var theData = {    foo: "bar"  };  var theJSON = JSON.stringify(theData);  var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);    var a = document.createElement('a');  a.href = uri;  a.innerHTML = "Right-click and choose 'save as...'";  document.body.appendChild(a);