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

javascripthtmljsonangularjs
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