How can i add record to some JSON file in angular js?

Question

I was trying to add some records in JSON file by using angular js but i was getting some error ,may be due to my bad code.

Please tell me, how should i do this?

This my plunker sample code in this plunker

 myApp.controller('ToddlerCtrl', function ($scope,$http) {

  $http.get('taskList.json').success(function (data){
    $scope.tasks = data;
});

   $scope.addEmp = function(){

    $scope.bla="sijs";
    $scope.tasks.push({ task:$scope.empName, priority:$scope.empCity, status:$scope.empState });


  var dataObj = {
            task : $scope.empName,
            priority : $scope.empCity,
            status:$scope.empState
    };  
    var res = $http.post('taskList.json', dataObj);
    res.success(function(data, status, headers, config) {
        $scope.message = data;
    });
    res.error(function(data, status, headers, config) {
        alert( "failure message: " + JSON.stringify({data: data}));
    }); 

}




});

Answer 1

The controller code is good, the only issue is that your form to add the new tasks are not within the div where you defined your controller so it will not inherit the scope from it, therefore the bindings empName, empCity, empState and addEmp won't work as they are part of the ToddlerCtrl.

Your html needs to look like this:

<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
     <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hardi's Task Analyzer</h1>

    <div ng-controller="ToddlerCtrl">
      <h2>Toddlers</h2>

      <!-- Add new task form -->
     <label>Add  Task Name</label><input type="text" ng-model="empName">
      <label>Add Priority</label><input type="text" ng-model="empCity">
      <label>Add Status</label><input type="text" ng-model="empState">
     <button  ng-click="addEmp()">Add <i class="icon-plus"></i></button>
      <br /><br />
      {{empName}}

      <table>
        <tr>
          <th>Task Name</th>
          <th>Priority</th>
          <th>Status</th>
        </tr>
        <tr ng-repeat="task in tasks">
          <td>{{task.task}}</td>
          <td>{{task.priority}}</td>
          <td>{{task.status}}</td>
        </tr>
      </table>
    </div>
  </body>

</html>

Please see updated plunker here: http://plnkr.co/edit/pMCFSilYUC1QHH6FUl6G?p=preview

This will add them to the list in the view and the controller, however to add them to the JSON file you will need to implement a server side action using NodeJS, ASP.NET, Java, Ruby or some other server side technology to access and edit the file. You will then need to add a save button to send the new list to the server to update the JSON file. It will be better to implement this with a database rather than a JSON file though to manage concurrency easily.

How can i add record to some JSON file in angular js?

Question

1 answers

solution1
0 2015-10-18 11:49:42

How can i add record to some JSON file in angular js?

Question

1 answers

solution1 0 2015-10-18 11:49:42

solution1
0 2015-10-18 11:49:42