Dhana Dhana - 2 months ago 24
AngularJS Question

How to perform Add, Edit and Delete operations for JSON data using AngularJS?

I have the json file:

test.json:

{
"MyTest": [{
"Main": {
"static": {
"name": "TestName1"
},
"dynamic": {
"testkey01": "testkey01data",
"testkey02": 40,
"testkey03vals": [1, 1, 1]
}}
}, {
"Main": {
"static": {
"name": "TestName2"
},"dynamic": {
"testkey01": "test01value",
"testkey03": 10,
"testflags": ["Test"]
}}
}, {
"Main": {
"static": {
"name": "TestName3"
},"dynamic": {
"testkey01": "testkey01value for TestName3",
"testnumber": 30
}}
}]
}


I wanted to perform Add, Edit/Update and Delete operations on this json data using AngularJS.

I have done the following:

index.html:

<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in myTestJson.MyTest" >
<td>{{value.Main.static.name}} </td>
<td><a ng-href="editName.html">Edit</a></td>
<td><button id="button1" ng-click="add(value.Main.static.name)">Add</button></td>
</tr>
</tbody>
</table>
</div>
<br><br>
<br>
<table border="1" class="table">
<thead>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in jsonNames" >
<td>{{name}}</td>
<td><button id="button1" name="singlebutton" ng-click="delete(name)">Delete</button></td>
</tr>
<tr ng-hide="myTestJson.MyTest.length">
<td colspan="3">
<p>No Names</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>


editName.html:

<!DOCTYPE html>
<html>
<title>Edit and Update JSON data</title>
<div>
<table><tbody>
<tr ng-repeat="(key, value) in myTestJson.MyTest.Main.dynamic" >
<td><label>{{key}}: </label>
<input placeholder="" type="text" ng-model="value">
</td>
</tr>
</tbody>
</table>
<button value="Update and Save" id="saveButtonId" ng-href="index.html" ng-click="finishEdit">Update/Save</button>
</div>
</html>


app.js:

var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope, $http ) {
$http.get('test.json').success(function(response) {
$scope.myTestJson = response;
// console.log(JSON.stringify(response));

$scope.add = function (){
alert("add is called");
//$scope.myTestJson.push($scope.jsonNames);
$scope.myTestJson.push($scope.myTestJson, jsonNames);
};
$scope.delete = function (index){
$scope.myTestJson.splice(index,1);
alert("JSON Name is deleted");
}
$scope.saveUpdate = function (index) {
$scope.myTestJson[index] = $scope.dynamiceditedModel;
$scope.edited = -1;
};
//$scope.dynamiceditedModel=$scope.myTestJson;
});
});


a. If I click on
Add
button: then respective JSON Name data should be added in my second table.

b. If I click on
Edit
button: then respective selected JSON Name "
dynamic
" field options should be editable (on
editName.html
) and then should be saved on clicking of Update/Save button(and then it should be redirected to
index.html
).

c. If I click on
Delete
button: then respective JSON Name should be deleted.

I have created Plnkr. I request you all please help me regarding this how can I perform these operations. Thanks in advance.

Answer

here is the answer based on our discussion. It may be lengthy since I worked on all the files and added them,

First of all,

index.html

<!DOCTYPE html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>

  <script src="app.js"></script>
  <script src="test.json"></script>
</head>
<body ng-app="myApp">    
  <ui-view></ui-view>    
 </body>

</html>

app.js

var app = angular.module('myApp', ['ui.router']);
    app.controller('TestCtrl',function($scope, $http,$state,$stateParams,filterFilter,$rootScope) {
        $rootScope.jsonNames = []
        $rootScope.filteredArray = []
        console.log($rootScope.myTestJson)         
        if($rootScope.myTestJson == undefined)
        {
            $http.get('test.json').success(function(response) {
                $rootScope.myTestJson = response;
            })
        }    
           // console.log(JSON.stringify(response));

          $scope.add = function (name){
            alert("add is called");
            //$scope.myTestJson.push($scope.jsonNames);
            $rootScope.jsonNames.push(name);
            console.log($rootScope.jsonNames)
          };
           $scope.delete = function (index){
            $rootScope.jsonNames.splice(index,1);
            alert("JSON Name is deleted");
          }

          console.log($stateParams.edit != undefined)
          if($stateParams.edit != undefined){
            console.log($rootScope)
            $rootScope.id = $stateParams.edit
          }
         $scope.saveUpdate = function (index) {
                console.log($rootScope.myTestJson)
                $state.go('home')
            };
            //$scope.dynamiceditedModel=$scope.myTestJson;

    });
    app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'main.html',
            controller: 'TestCtrl',
        })
        .state('edit', {
            url: '/edit/:edit',
            templateUrl: 'edit.html',
            controller: 'TestCtrl',
        });

});

main.html

<div>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Edit</th>
        <th>Add</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(key, value) in myTestJson.MyTest" >
        <td>{{value.Main.static.name}} </td>
        <!-- <td>{{$index}} </td> -->

        <td><a ui-sref="edit({edit: $index})">Edit</a></td>
        <td><button id="button1"  ng-click="add(value)">Add</button></td>
      </tr>
    </tbody>
  </table>

  <br><br>
  <br><p>Second Table:</p>
  <table border="1" class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr  ng-repeat="(key, value) in jsonNames"  >
        <td>{{value.Main.static.name}}</td>
        <td><button id="button1" name="singlebutton" ng-click="delete($index)">Delete</button></td>
      </tr>
      <tr ng-hide="jsonNames.length > 0">
        <td colspan="3">
          <p>No Names</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

edit.html

<title>Edit and Update JSON data</title>
  <div>
    {{myTestJson.MyTest[id].dynamic}}
     <table><tbody>
          <tr ng-repeat="(key, value) in myTestJson.MyTest[id].Main.dynamic  track by $index"  >
            <td><label>{{key}}: </label> 
      <input placeholder="" type="text" ng-model="myTestJson.MyTest[id].Main.dynamic[key]">
             </td>
              </tr>
          </tbody>
      </table>
      <button value="Update and Save" id="saveButtonId" ng-click="saveUpdate()">Update/Save</button>
  </div>

The json file is same as it is.

pls integrate this, I will explain it where you want.

Comments