角度のみを使用してhtml形式のフォームで「送信」を押した後、jsonファイルにデータを書き込もうとしていますが、何も起こりません。 angularを使用して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:
<form name="form" ng-submit="onSubmit()" novalidate>
<formly-form model="model" fields="fields"></formly-form><br/>
<button type="submit">Submit</button>
</form>
Sample_data.jsonは作成されません。空のファイルを作成しても、データでいっぱいにはなりません。 $ scope.modelには、データが完全に含まれています。誰でも助けることができれば、それは非常に高く評価されます。ありがとう、アロン。
角度だけでローカルのJSONファイルにデータを書き込むことは可能ですか?
いいえ。ローカルファイルシステム(例:file://myfile.html
)またはローカルウェブサーバー(例:http://localhost/myfile.html
またはhttp://Host-on-my-intranet/myfile.html
)からページを実行していても、まだ手段はありませんブラウザがホストするJavaScriptコードからファイルに直接書き込む方法。
2つの選択肢:
書き出すことができる何か(サーバーなど)に送信する、または
ユーザーが右クリックして「名前を付けて保存...」を選択できるdata:
URIとして提供します(可能な場合)。
JSONテキストのdata:
URIを作成する方法は次のとおりです。
var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);
完全な例#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);
いや.
Angularはクライアント側を実行します。
サーバーにデータを書き込みたい場合(ブラウザーと同じコンピューター上にデータを書き込みたい場合でも)、サーバー側のコードが必要です。
Javascriptからローカルファイルシステムに(直接)アクセスすることはできません。これは、セキュリティ上の理由から強制されます(考えてみると意味があります!)。
これは不可能なので、別のルートを試すことができます。あなたの$ scope.saveは途中で呼び出されるのではなく、割り当てられるだけです。
$scope.save = function() {
localStorage.model = JSON.stringify($scope.model);
};
function onSubmit() {
$scope.save();
$scope.msg = 'saved';
};
モデルを元に戻すには、initでこれを行います。
if (localStorage.model)
$scope.model = JSON.parse(localStorage.model);
次のコードは、JSONオブジェクトのダウンロードボタンを追加します。
注:アンカータグでボタンをラップすることはHTML 5には推奨されませんが、Chromeで十分です。YMMV。
HTML:
<a download="my-json-object.json" [href]="dataUri">
<button>Download</button>
</a>
TypeScript:
get dataUri(): SafeUrl {
const jsonData = JSON.stringify(this.dataSource);
const uri = 'data:application/json;charset=UTF-8,' + encodeURIComponent(jsonData);
return this.sanitizer.bypassSecurityTrustUrl(uri);
}