web-dev-qa-db-ja.com

角度だけでローカルのJSONファイルにデータを書き込むことは可能ですか?

角度のみを使用して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には、データが完全に含まれています。誰でも助けることができれば、それは非常に高く評価されます。ありがとう、アロン。

22
Alon Weissfeld

角度だけでローカルのJSONファイルにデータを書き込むことは可能ですか?

いいえ。ローカルファイルシステム(例:file://myfile.html)またはローカルウェブサーバー(例:http://localhost/myfile.htmlまたはhttp://Host-on-my-intranet/myfile.html)からページを実行していても、まだ手段はありませんブラウザがホストするJavaScriptコードからファイルに直接書き込む方法。

2つの選択肢:

  1. 書き出すことができる何か(サーバーなど)に送信する、または

  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);
22
T.J. Crowder

いや.

Angularはクライアント側を実行します。

サーバーにデータを書き込みたい場合(ブラウザーと同じコンピューター上にデータを書き込みたい場合でも)、サーバー側のコードが必要です。

5
Quentin

Javascriptからローカルファイルシステムに(直接)アクセスすることはできません。これは、セキュリティ上の理由から強制されます(考えてみると意味があります!)。

javascriptを使用したローカルファイルアクセス

2
Alex McMillan

これは不可能なので、別のルートを試すことができます。あなたの$ 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);
2
Jason Sebring

次のコードは、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);
  }
0
AnthonyW