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.

Solution 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);

Solution 2

No.

Angular runs client side.

If you want to write data to the server (even one on the same computer as the browser) then you need server side code to do it.

Solution 3

You can't access the local filesystem (directly) from Javascript. This is enforced for security reasons (and makes sense when you think about it!).

Local file access with javascript

Solution 4

Since this is not possible you could try another route. Your $scope.save was not being invoked by the way, only assigned.

$scope.save = function() {
  localStorage.model = JSON.stringify($scope.model);
};
function onSubmit() {
  $scope.save();
  $scope.msg = 'saved';
};

To get your model back do this on init:

if (localStorage.model)
  $scope.model = JSON.parse(localStorage.model);

View more solutions