Simple CRUD using AngularJS and PHP with JSON File for Storage

Question

Before Down voting (I wanted to implement the CRUD using JSON file and not the Database)

I am using the below code in Angular JS to send the form data to PHP and from PHP I wanted to modify my local JSON file.

I am facing below issues

The Form values are going as Null in the JSON file

I want to append the array every time user clicks on the register button

 <!DOCTYPE html>
    <html lang="en">
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
     <div ng-controller="myCtrl">
      <form>
       <h2>Register Form</h2>
       <div>
       <label>First Name</label>
       <input type="text" ng-model="firstname" placeholder="First Name"  required="required">
       </div>
    <div>
      <label>Last Name</label>
      <input type="text" ng-model="lastname" placeholder="Last Name" required="required">
    </div>
    <button ng-click='Register()'>Register</button>
    </form>
    <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr ng-repeat="data in usersData">
      <td>{{data.firstname}}</td>
      <td>{{data.lastname}}</td>
    </tr>
  </table>
</div>
<script type="text/javascript">

  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope, $http) {

    $scope.Register = function () {
      $http.post("misc.php", {
        'firstname': $scope.firstname,
        'lastname': $scope.lastname
      }).success(function (response) {
        $scope.usersData = response.users;
      });
    };
  });
</script>

 </body>
</html>

PHP Code

<?php
$file="misc.json";
$json = json_decode(file_get_contents($file),TRUE);
$first = $_POST['firstname'];
$last = $_POST['lastname'];
$json[$user] = array("first" => $first, "last" => $last);
file_put_contents($file, json_encode($json));
?>

But Once I Submit I am getting below info in the JSON file {"":{"first":null,"last":null}}

But I wanted to send real values and the JSON format I want as

[{
  "first": "John",
  "last": "Anderson"
},
{
  "first": "Mike",
  "last": "Langer"
}]

$user is not set, angular passes data raw so you need to use file_get_contents('php://input') in PHP instead of POST, or change the submitted form data in angular. You also need to set your development environment to show all errors. And lastly, your expected output does not match what you will get from $json[$user] = array(..., it will give you a json file with { "whatever $user is": ["first": "jim", "last": "leirvik"] }. — JimL
– JimL, Commented Oct 1, 2017 at 19:03

Kannan T · Accepted Answer · 2017-10-01 19:08:02Z

1

I can answer for your 2nd question which is I want to append the array every time user clicks on the register button

Have a local array named $scope.usernames and when you are making a $http.post call inside that success function append it to the $scope.usernames array. Refer the code below.

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
  $scope.usernames=[];
  $scope.Register = function () {
    $http.post("misc.php", {
     'firstname': $scope.firstname,
     'lastname': $scope.lastname
    }).success(function (response) {
        $scope.usernames.push({"firstname":$scope.firstname,"lastname":$scope.lastname});    
        $scope.usersData = response.users;
    });
  };
});

I have used PHP long back so i couldn't find about the first error first make sure that it works in angular then make a post call

answered Oct 1, 2017 at 19:08

Kannan T

1,7695 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahesh G Over a year ago

sure checking this now!!

Kannan T Over a year ago

If it is working fine please make this answer as correct. Thanks

Collectives™ on Stack Overflow

Simple CRUD using AngularJS and PHP with JSON File for Storage

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related