javascript - How to perform Add, Edit and Delete operations for JSON data using AngularJS? -
i have 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 testname3", "testnumber": 30 }} }] } i wanted perform add, edit/update , delete operations on json data using angularjs.
i have done 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 , 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 , 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 called"); //$scope.mytestjson.push($scope.jsonnames); $scope.mytestjson.push($scope.mytestjson, jsonnames); }; $scope.delete = function (index){ $scope.mytestjson.splice(index,1); alert("json name deleted"); } $scope.saveupdate = function (index) { $scope.mytestjson[index] = $scope.dynamiceditedmodel; $scope.edited = -1; }; //$scope.dynamiceditedmodel=$scope.mytestjson; }); }); a. if click on add button: respective json name data should added in second table.
b. if click on edit button: respective selected json name "dynamic" field options should editable (on editname.html) , should saved on clicking of update/save button(and should redirected index.html).
c. if click on delete button: respective json name should deleted.
i have created plnkr. request please me regarding how can perform these operations. in advance.
here answer based on our discussion. may lengthy since worked on files , 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 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 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 , update json data</title> <div> {{mytestjson.mytest[id].dynamic}} <table><tbody> <tr ng-repeat="(key, value) in mytestjson.mytest[id].main.dynamic track $index" > <td><label>{{key}}: </label> <input placeholder="" type="text" ng-model="mytestjson.mytest[id].main.dynamic[key]"> </td> </tr> </tbody> </table> <button value="update , save" id="savebuttonid" ng-click="saveupdate()">update/save</button> </div> the json file same is.
pls integrate this, explain want.
Comments
Post a Comment