如何在Angular中将表数据转换为Json格式

Question

I am trying to convert data present in an HTML table into JSON link . I'm getting undefined values in object.

HTML code:

<table colspan="2" border="1">
      <tr>
        <th>Source</th>
         <th>Destination</th
      </tr>
      <tr ng-repeat="col in MapCol">
         <td>
      <select ng-model="col.value" ng-init="col.value=MainData.headers[$index].header">
<option ng-selected="{{head.header == col.value}}" ng-repeat="head in MainData.headers">{{head.header}}
</option>
        </select>
           </td>
           <td>{{col.ColName}}</td>

           </tr>

        </table>
        <br/>
        <button ng-click="map();">Map</button>

Controller code:

var app = angular.module("ShrTest", []);
app.controller("Test1", function ($scope) {
$scope.MainData = { "name": "1-06082015185338.txt", "headers": [{ "header": "Name" }, { "header": "Age" }, { "header": "Address" }], "records": [{ "Name": "Paul", "Age": "23", "Address": "1115 W Franklin" }, { "Name": "Bessy the Cow", "Age": "5", "Address": "Big Farm Way" }, { "Name": "Zeke", "Age": "45", "Address": "W Main St" }] };

$scope.MapCol = [{ "ColName": "Col1" }, { "ColName": "Col2" }, { "ColName": "Col3" }];


$scope.map=function(){
    $scope.fields=[{"source":$scope.value,"destination":$scope.ColName}];
                    console.log(" $scope.fields..", $scope.fields);
}
});

Answer 1

JS

$scope.map=function(){
        $scope.fields = [];
        for(i in $scope.MapCol){
          var obj = $scope.MapCol[i]; $scope.fields.push({"source":obj.value,"destination":obj.ColName})
        }

                        console.log($scope.fields);
    }

Here is Modified fiddle:

Demo Here

I hope this will help you.