How to push an object into a json array through $http?

Question

I'm new to angularJS. What I need to do is to add an employee into a file named as "employees.json" where an employee has 3 features, name, city and state which can be entered through text boxes. My current code is below and due to some reason it is not working. Can someone help me?

    $scope.addEmplyee=function(){
        / create new employee here with user inputs 
        // an Employee object has three properties: name, city, state 
        var name=$scope.name;
        var city=$scope.city;
        var state=$scope.state;

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

        $scope.employee={"name":name,"city":city,"state":state};

        $http.post('/employees.json', {"employee": $scope.employee})
           .success(function(response,  status, headers, config){
              $scope.employees.push($scope.employee);
        });


    };

HTML code is as follows

     <div>
        <b>Add Employee :</b>
        <div>Name:<input type="text" ng-model="name"/></div>
        <div>City: <input type="text" ng-model="city"/></div>
        <div>State: <input type="text" ng-model="state"/></div>
        <button class="btn" ng-click="addEmplyee()">Add</button>
    </div>

Have you create you backend server to handle /employee.json http request ? — Tyler.z.yang, Nov 03 '14 at 05:30
You need to actually handle this POST request on the server (e.g. by writing a file) — New Dev, Nov 03 '14 at 05:37

score 0 · Answer 1 · edited May 23 '17 at 12:20

You cannot really write to a file from the browser. See this question : Writing a json object to a text file in javascript. However, you can send the POST request to a server who will do the job of writing to the file.

That being said, I see several issues in your code. Your name, city and state variables are not declared with var (Python background?), which makes them global although they seem meant to be local.

You have a race condition on your $scope.employees property : namely, you seem to rely on the fact that the GET request will complete before the POST request, but there is no reason for that as these calls are asynchronous. How could it go wrong? For example, $scope.employees may well still not be defined when the callback of the POST request executes.

How to push an object into a json array through $http?

1 Answers1