2016-03-27 16 views
1

イオンフレームワークを使用してハイブリッドアプリケーションを作成しようとしていますが、私は一点で立ち往生しています。私がしようとするのは、3つの異なる入力ボックスの値を 'data.json'ファイルに保存し、そのデータを取得するか、必要なときに変更を加え、アプリケーションの実行の有無にかかわらず値をそこに残すことです。.jsonファイルにデータを投稿できません

$http.get('js/data.json').success(function (data) { 
    $scope.values = data; 
}); 

Iはdata.jsonファイル内のアレイで使用可能なオブジェクトをループすることができるよこのコードのビットを使用してHTML

<div ng-repeat="yoyo in values"> 
    <p ><h2>{{yoyo.name}}</h2></p> 
</div>` 

。しかし、私はそれに何かを投稿することができません。

$scope.process = function() { 
    // var SendData = angular.toJson({ 
    // json: JSON.stringify() }); 

var SendData= { 
    "name": $scope.box1, 
    "owners": $scope.box2, 
    "country": $scope.box3, 
}; 

$http.post('js/data.json',SendData) 
    .success(function() { 
     console.log('done it bro'); 
    }); 
}; 

ただし、上記の機能は、ボタンをクリックするたびにトリガーされます。これらの3つのボックスから値を取得し、data.jsonファイルにプッシュする必要がありますが、何も起こりません。 {{yoyo.name}}に変更が見当たらないので、配列内のすべてのオブジェクトが表示されるはずです。しかし、私が実行した.success関数を見ることができますconsole.log

私はなぜデータを.jsonファイルに保存するのか、それとも正しい方法ですか?

+0

ファイルは読み取り専用ですか? – PmanAce

+0

@PmanAce data.jsonファイルのプロパティに行くことによって、私は読み取り専用のラジオボタンがチェックされていないことがわかります。乾杯する –

答えて

1

バニラJavaScriptを使用してサーバーにファイルを保存することはできません。悪意のあるユーザーが自分のJavaScriptコンソールを使用してサーバーにデータを投稿できる場合に発生するすべての問題を考えてみましょう。それが許されない理由です。

私たちは実際に私たちの仕事をする別のサーバー側APIエンドポイントと通信するためのツールAJAXを使用します。ここでlocalStorageを使用してSendDataを保存できます。より良いアプローチは、このようなサービスや工場を使用することです。

app.factory("LocalStorageService", ["$window", function ($window) { 
    var HasKey = function (key) { 
     return $window.localStorage && $window.localStorage.getItem(key); 
    }; 
    var GetItem = function (key) { 
     if ($window.localStorage) { 
      return $window.localStorage.getItem(key); 
     } 
     return null; 
    }; 
    var SetItem = function (key, value) { 
     if ($window.localStorage) { 
      $window.localStorage.setItem(key, value); 
      return true; 
     } 
     return false; 
    }; 
    var RemoveItem = function (key) { 
     if ($window.localStorage) { 
      return $window.localStorage.removeItem(key); 
     } 
     return null; 
    }; 
    return { 
     HasKey: HasKey, 
     GetItem: GetItem, 
     SetItem: SetItem, 
     RemoveItem: RemoveItem 
    }; 
}]); 

localStorageに挿入するアプリに工場を注入など、それを呼び出すために、

//To store into localStorage 
LocalStorageService.SetItem("personalDetails", JSON.stringify(SendData)); 

//To retrieve from localStorage 
var DTO = LocalStorageService.GetItem("personalDetails"); 
var personalDetails = JSON.parse(DTO); 

P.S:すぐに、より良い命名規則を使用して起動してください。そうでなければ、それは簡単ではない悪い習慣になるでしょう。 ;)

+0

ありがとう、私は上記の例を見て、私はそれの概念を理解しています。ちょうど質問、私は "personalDetails"に新しい要素を追加し、それを更新し続けます。私は複数の値のために複数のキーを持っていたくない。私はすべてのデータを1つのキーの下にjSon形式で格納します。何か案が? –

1

$http.postを実行するには、ファイルシステムの読み書き方法で目的のデータをキャッチしてdbまたはJSONに保存するバックエンドAPI(PHP、Node Jsなど)が必要です。

+0

ファイルをローカルストレージに保存することはできませんか?私はサーバーにデータを保存したくありません。これを行う正しい方法は何ですか? –

+0

また、jsonファイルからhttp.getデータを作成できる場合は、それを書き込むこともできますか? –

0

データを直接.j sonファイルに書き込むことはできません。 .j sonファイルからデータを受け取ることができます。このようなシナリオでは、ブラウザのローカルストレージ、Web SQL、SQL Liteなどのオプションを使用できます。

ローカルの静的な.j sonファイルがread j son値のためにのみ使用できることを忘れないでください。

+0

私は必要なものをlocalstorage cozしようとします。私は1つの関数にデータを格納しようとしましたが、このデータはページがリロードされると消えます...しかし、私はそれに反対する必要があります。とにかくうれしい –

+0

コードスニペットから。私はあなたのローカルと成功のdata.jsonファイルからのデータを取得することを理解することができます同じdata.jsonに右にしようとします。それは不可能です..スニペットを更新した場合、ここで共有してください。ローカルストレージを使用している場合は、すべてのDOMリフレッシュでローカルストレージの値を再割り当てしています...ごめんなさい。 – Shamil

関連する問題