Geek Answers Handbook

AngularJS JSON format

I am new to AngularJS and am trying to make formatted JSON based on the values ​​of the tr and td table.

The tr table is automatically generated. After submitting the form, I try to generate json values.

After submitting the form, I need to generate JSON.

<form> <table> <!-- Auto generated rows --> <tr> <td> <input type="text" class="form-control" name="tname" value=""> </td> <td> <select ng-model="selection1" class="form-control" name="ttype" value=""> <option value="bbb" selected>Test</option> <option value="aaa" >Lumpsum</option> </select></td> <input type="text" class="form-control parsley-success" name="tvalue" > </td> </tr> <tr> <td> <input type="text" class="form-control" name="tname" value=""> </td> <td> <select ng-model="selection1" class="form-control" name="ttype" value=""> <option value="bbb" selected>Test</option> <option value="aaa" >Lumpsum</option> </select></td> <input type="text" class="form-control parsley-success" name="tvalue" > </td> </tr> <tr> <td> <input type="text" class="form-control" name="tname" value=""> </td> <td> <select ng-model="selection1" class="form-control" name="ttype" value=""> <option value="bbb" selected>Test</option> <option value="aaa" >Lumpsum</option> </select></td> <input type="text" class="form-control parsley-success" name="tvalue" > </td> </tr> <tr> <td> <input type="text" class="form-control" name="tname" value=""> </td> <td> <select ng-model="selection1" class="form-control" name="ttype" value=""> <option value="bbb" selected>Test</option> <option value="aaa" >Lumpsum</option> </select></td> <input type="text" class="form-control parsley-success" name="tvalue" > </td> </tr> </table> <input type="submit" name="save" value="save"/> </form>

I have a table with three rows, so I need to create 3 arrays of json objects

 "data" : [ { "tname":"{tr1 name}", "value":"{tr1 tvalue}", "ttype":"{tr1 ttype}", "index":"index 1" }, { "tname":"{tr2 name}", "value":"{tr2 tvalue}", "ttype":"{tr2 ttype}", "index":"index 2" }, { "tname":"{tr3 tname}", "value":"{tr3 tvalue}", "ttype":"{tr3 ttype}", "index":"index 3" } ]

If I have 10 rows of a table, this means that I need to create a new row object.

Please can you suggest the correct way to do this in AngularJS?

+6
source share
3 answers

JsFiddle SO based solution.

Jsfiddle example.

 angular.module('ExampleApp', []) .controller('firstCtrl', function($scope, $filter) { $scope.cloneRow = function(comment) { $scope.finalJson.comments.push({}); }; $scope.finalJson = { comments: [{name:"Basic",type:"",value:"",index:1}, {name:"house rent allowance",type:"",value:"",index:2}, {}] }; $scope.removeRow = function(index) { $scope.finalJson.comments.splice(index, 1); }; $scope.submit = function() { var json = JSON.stringify($scope.finalJson.comments); console.log(json); alert(json); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="firstCtrl"> <table> <tr ng-repeat="comment in finalJson.comments"> <td> <input ng-disabled="$index<2" type="text" ng-model="comment.name" class="form-control" value="" placeholder="Special Allowance" /> </td> <td> <select ng-model="comment.type" class="form-control" name=""> <option value="">-- Select an option--</option> <option value="Percentage" selected>Percentage</option> <option value="Percentage">Lumpsum</option> </select> </td> <td> <input type="text" ng-model="comment.value" class="form-control parsley-success"> <input type="hidden" ng-model="comment.index" ng-show="(comment.index=$index) ||1==1" class="form-control parsley-success"> </td> <td> <button ng-show="finalJson.comments.length>2 && $index>2" type="button" ng-click="removeRow($index)" class="btn btn-danger" data-type="plus">Minus <span class="glyphicon glyphicon-minus"></span> </button> <button ng-hide="$index<2" type="button" ng-click="cloneRow()" class="btn btn-success btn-number" data-type="plus">Add <span class="glyphicon glyphicon-plus"></span> </button> </td> </tr> </table> <pre>{{finalJson.comments|json}}</pre> <button ng-click="submit()"> Submit </button> </div> </div>
+1
source

Try this jsfiddle solution.

 angular.module('ExampleApp', []) .controller('firstCtrl', function($scope) { $scope.arr = []; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="firstCtrl"> <div ng-init="arr[0]={firstName:'123',lastName:'123'}"> <input ng-model="arr[0].firstName"> <input ng-model="arr[0].lastName"> </div> <div ng-init="arr[1]={firstName:'234',lastName:'234'}"> <input ng-model="arr[1].firstName"> <input ng-model="arr[1].lastName"> </div> <div ng-init="arr[2]={firstName:'567',lastName:'567'}"> <input ng-model="arr[2].firstName"> <input ng-model="arr[2].lastName"> </div> <pre> json={{arr|json}}</pre> </div> </div>

Updated based on comments

Jsfiddle example, generate lines based on input .

 angular.module('ExampleApp', []) .controller('firstCtrl', function($scope,$filter) { $scope.arr = []; $scope.change = function() { $scope.arr = $filter('range')($scope.arr,$scope.rowCount) } }) .filter('range', function() { return function(arr, rowCount) { rowCount*=1; if(!rowCount || Number.isNaN(rowCount)) return arr; console.log(Number.isNaN(rowCount)) var resArray =arr; if (arr.length < rowCount) { for (var i = arr.length; i < rowCount; i++) resArray.push({}); } else { resArray=[]; for (var i = 0; i < rowCount; i++) resArray.push(arr[i]); console.log(resArray); } return resArray; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="firstCtrl"> <input ng-model="rowCount" ng-change="change()"> <div ng-repeat="item in arr"> <input ng-model="item.firstName"> <input ng-model="item.lastName"> </div> <pre>json = {{arr|json}}</pre> </div> </div>

Updated according to the real needs of SO

Jsfiddle example

 angular.module('ExampleApp', []) .controller('firstCtrl', function($scope,$filter) { $scope.arr = []; $scope.addRow = function() { $scope.arr.push({}); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="firstCtrl"> <div ng-repeat="item in arr"> <input ng-model="item.firstName"> <input ng-model="item.lastName"> </div> <button ng-click="addRow()"> Add row </button> <pre>json = {{arr|json}}</pre> </div> </div>
+1
source

Another solution

 angular.module('ExampleApp', []) .controller('firstCtrl', function($scope) { $scope.data = []; $scope.tType = ['test1', 'test2']; $scope.rowCount = 5; //number of rows you need $scope.range = function(min, max, step) { step = step || 1; var input = []; for (var i = min; i <= max; i += step) { input.push(i); } return input; }; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp" ng-controller="firstCtrl"> <form> <table> <tr ng-repeat="row in range(0,rowCount)"> <td> <input ng-init="data[$index].tname =''" ng-model="data[$index].tname" type="text" class="form-control" name="tname_{{$index}}" value=""> </td> <td> <select ng-init="data[$index].tType = ''" ng-model="data[$index].tType" class="form-control" name="ttype_{{$index}}"> <option ng-selected="true">Select</option> <option value="bbb">Test</option> <option value="aaa">Lumpsum</option> </select> </td> <td> <input type="text" ng-init="data[$index].tValue=''" ng-model="data[$index].tValue" class="form-control parsley-success" name="tvalue_{{$index}}"> </td> </tr> </table> <pre>json={{data|json}}</pre> </form> </div>
0
source

More articles:


All Articles