AngularJS JSON format

Question

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

The table tr is auto generated. Once the form is submitted, I try to generate the json values.

After the form is submitted, I need to generate the 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 3 rows table, so I need to generate 3 object array the json

"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 table rows, that means I need to generate a new row object.

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

Answer 1

Solution based on jsFiddle SO.

Example on jsfiddle.

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>