CODEWITHSUNDEEP
arraysangularjsjsonionic-framework
Amrit Sohal
Amrit Sohal

Reputation: 77

Unable to post data in .json file

I am trying to create a hybrid application using ionic framework but I am stuck at one point. All I trying to do is save values from three different input boxes into 'data.json' file and retrieve that data or make change whenever needed and values should remain there regardless of whether application is running or not. 

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

html

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

Using this bit of code I'm able to loop through the objects available in array in data.json file. But I am unable to post anything into it.

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

However above function triggered whenever button is clicked. It should take values from those three boxes and should push into data.json file but nothing happens. I cannot see any change in {{yoyo.name}} as this should show me all the objects in array. However I can see my .success function it executed in console.log

Please advise why cant i save data in .json file or what is right way to do it?

Upvotes: 1

Views: 1162

Answers (3)

codeandcloud
codeandcloud

Reputation: 55248

You cannot save a file in server using vanilla JavaScript. Think of all the problems that occur if a malicious user can post data to our server using just his JavaScript console? That is why its not allowed.

So we use AJAX, a tool to communicate with another server-side API endpoint that actually does the job for us. Here you can use localStorage to save your SendData. A better approach will be using a service or factory like this.

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
    };
}]);

Now to insert into localStorage, inject the factory into your app and call it like,

//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: Please start using better naming conventions soon. Or else it will become a bad habit not that easy to break. ;)

Upvotes: 1

Shamil
Shamil

Reputation: 728

You cannot write the data directly into the .j son file. but you can receive the data from the .j son file. for such scenarios you can go the option such as browser local storage,web SQL,SQL lite.

Remember for the static .j son file in the local can have only used for read j son value.

Upvotes: 0

Zahidur Rahman
Zahidur Rahman

Reputation: 1718

To do $http.post you need a back end API(PHP,Node Js etc) that catch your desired data and save into the db or JSON by Read-write method in file system.

Upvotes: 1

Related Questions