CODEWITHSUNDEEP
phpangularjsjsoncrud
Mahesh G
Mahesh G

Reputation: 1276

Simple CRUD using AngularJS and PHP with JSON File for Storage

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

  1. The Form values are going as Null in the JSON file

  2. 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"
}]

Upvotes: 0

Views: 697

Answers (1)

Kannan T
Kannan T

Reputation: 1749

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

Upvotes: 1

Related Questions