是否有可能将数据写入只有角度的本地json文件?

时间:2021-05-28 17:03:19

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:

我试图在只使用角度的html表单上点击“Submit”后将数据写入json文件,但什么都没有发生。我知道我可以使用角度读取json文件,但在创建文件时不确定。在控制器onSubmit():

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

html:

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.

sample_data。没有创建json,如果我创建一个空文件,它也不会填充数据。美元的范围。模型defenitly包含数据。如果有人能帮忙,我们将不胜感激。谢谢,阿龙。

4 个解决方案

#1


13  

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

是否有可能将数据写入只有角度的本地json文件?

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.

不。即使您正在从本地文件系统(例如,文件://myfile.html)或本地webserver(例如,http://localhost/myfile)运行页面。html或http://hostst -on-my-intranet/myfile.html)仍然无法从浏览器托管的JavaScript代码直接写入文件。

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..."

    作为数据提供:URI(如果在您的情况下可行),用户可以右键单击并选择“save as…”

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

    下面是如何创建数据的方法:用于JSON文本的URI:

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

Full Example of #2:

完整的例子,# 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);

#2


5  

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.

如果您想要将数据写入服务器(甚至是与浏览器位于同一台计算机上的数据),那么您需要服务器端代码来实现这一点。

#3


2  

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

您不能(直接)从Javascript访问本地文件系统。这是出于安全考虑而强制执行的(当你考虑它时,这是有意义的!)

Local file access with javascript

使用javascript进行本地文件访问

#4


2  

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

既然这是不可能的,你可以试试另一条路。你的美元范围。顺便说一下,save不是被调用的,而是被分配的。

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

#1


13  

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

是否有可能将数据写入只有角度的本地json文件?

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.

不。即使您正在从本地文件系统(例如,文件://myfile.html)或本地webserver(例如,http://localhost/myfile)运行页面。html或http://hostst -on-my-intranet/myfile.html)仍然无法从浏览器托管的JavaScript代码直接写入文件。

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..."

    作为数据提供:URI(如果在您的情况下可行),用户可以右键单击并选择“save as…”

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

    下面是如何创建数据的方法:用于JSON文本的URI:

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

Full Example of #2:

完整的例子,# 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);

#2


5  

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.

如果您想要将数据写入服务器(甚至是与浏览器位于同一台计算机上的数据),那么您需要服务器端代码来实现这一点。

#3


2  

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

您不能(直接)从Javascript访问本地文件系统。这是出于安全考虑而强制执行的(当你考虑它时,这是有意义的!)

Local file access with javascript

使用javascript进行本地文件访问

#4


2  

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

既然这是不可能的,你可以试试另一条路。你的美元范围。顺便说一下,save不是被调用的,而是被分配的。

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