Batman Batman - 8 days ago 4
HTML Question

HTML Table Generate Using ng-repeat

Hi Can anyone help me in generating the HTML table by modifying the Demo . Where I am getting the data from JSON as below and I am using Angular JS with ng-repeat

Demo

Angular JS

var app = angular.module('studentApp', []);

app.controller('StudentCntrl', function($scope,$http) {
$http.get('data.json').then(function (response){
console.log(response.data.pages);
$scope.deviceInfo = response.data.account.premise;
});
});


HTML

<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<th ng-repeat="x in deviceInfo">{{x}}

</th>
</tr>
</tbody>
</table>
</div>


JSON Data

{
"account": {
"firstName": "John",
"premise": {
"camera": [
{
"id": "116",
"name": "Camera1"
},
{
"id": "117",
"name": "Camera2"
},
{
"id": "125",
"name": "Camera3"
}
],
"thermostat": [
{
"id": "140",
"name": "Thermostat1"
},
{
"id": "145",
"name": "Thermostat2"

}
]
}
}
}


And I want to generate the HTML Table as below



<table>
<tr>
<th>camera</th>
<th>camera</th>
<th>camera</th>
<th>thermostat</th>
<th>thermostat</th>
</tr>
<tr>
<td>Camera1</td>
<td>Camera2</td>
<td>Camera3</td>
<td>Thermostat1</td>
<td>Thermostat2</td>
</tr>
<tr>
<td>116</td>
<td>117</td>
<td>125</td>
<td>140</td>
<td>145</td>
</tr>
</table>




Answer

This is a generic solution with the object and the properties.

var app = angular.module('studentApp', []);

app.controller('StudentCntrl', function($scope,$http) {
    //$http.get('data.json').then(function (response){
	              //console.log(response.data.pages);
                //$scope.deviceInfo = response.data.account.premise;
        //});
  
var responseData = {
  "account": {
    "firstName": "John",
    "premise": {
      "camera": [
        {
          "id": "116",
          "name": "Camera1"
        },
        {
          "id": "117",
          "name": "Camera2"
        },
        {
          "id": "125",
          "name": "Camera3"
        }
      ],
      "thermostat": [
        {
          "id": "140",
          "name": "Thermostat1"
        },
        {
          "id": "145",
          "name": "Thermostat2"
         
        }
      ]
    }
  }
};
  
rebuildData(responseData);
  
function rebuildData(data) {
  var deviceInfoData = responseData.account.premise;
  var deviceInfo = { headers: ['Property'], rows: []};
  
  angular.forEach(deviceInfoData, function(value, key) {
     for(var i = 0; i < value.length; i++) {
        deviceInfo.headers.push(key);
        var rowsCount = 0;
        angular.forEach(value[i], function(value2, key2) {
           if(deviceInfo.rows.length <= rowsCount) {
             deviceInfo.rows[rowsCount] = [key2];
           }
           deviceInfo.rows[rowsCount].push(value2);
           ++rowsCount;
        });
     }
  });
  
  $scope.deviceInfo = deviceInfo;
}
  
});
<!DOCTYPE html>
<html ng-app="studentApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script  src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>

<body ng-controller="StudentCntrl">

 
    <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th ng-repeat="h in deviceInfo.headers track by $index">{{h}}</th>
            </tr>
          </thead>
          <tbody>
             <tr ng-repeat="r in deviceInfo.rows track by $index">
                <td ng-repeat="c in r track by $index">{{c}}</td>
             </tr>
          </tbody>
        </table>
      </div>
</body>
</html>