Query Master Query Master - 1 month ago 9
Javascript Question

Dynamic result array need to bind with table with different layout using Angular JS

I have dynamic result of an array which need to bind with table but some different layout using Angular JS. I have tried many attempt but no success. I have require desired result. Helps are definitely appreciated.



var arr = [
{
"unique_id": "CS",
"college": "BSCS",
"arr_length": 1,
"program_section": [
{
"question": "How you rate your teacher",
"total": 135,

},
{
"question": "Are you satisfy with your teacher",
"total": 142,

},
{
"question": "Which course you have most like throughout the session",
"total": 135,

},
{
"question": "How much you have rate your instructor",
"total": 137,

},

]
},
{
"unique_id": "MBA",
"college": "BBA",
"arr_length": 2,
"program_section": [
{
"question": "How you rate your teacher",
"total": 175,

},
{
"question": "Are you satisfy with your teacher",
"total": 142,

},
{
"question": "Which course you have most like throughout the session",
"total": 165,

},
{
"question": "How much you have rate your instructor",
"total": 137,

},

]
},
{
"unique_id": "CA",
"college": "Account",
"arr_length": 1,
"program_section": [
{
"question": "How you rate your teacher",
"total": 145,

},
{
"question": "Are you satisfy with your teacher",
"total": 162,

},
{
"question": "Which course you have most like throughout the session",
"total": 125,

},
{
"question": "How much you have rate your instructor",
"total": 117,

},

]
}
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = arr;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">

<table border="1" ng-repeat="x in names">
<tr>
<td>Question</td>
<td>{{ x.college }}</td>
</tr>
<tr>
<td>
<table border="1" ng-repeat="y in x.program_section">
<tr>
<td width="100px">{{ y.question }}</td>
<td width="100px">{{ y.total }}</td>
</tr>
</table>
</td>
<td>
</tr>
</table>

</div>






Desired Result




<table width="200" border="1">
<tr>
<td>Question</td>
<td>CS</td>
<td>MBA</td>
<td>CA</td>
</tr>
<tr>
<td>How you rate your teacher</td>
<td>135</td>
<td>175</td>
<td>145</td>
</tr>
<tr>
<td>Are you satisfy with your teacher</td>
<td>142</td>
<td>142</td>
<td>162</td>
</tr>
<tr>
<td>Which course you have most like throughout the session</td>
<td>135</td>
<td>165</td>
<td>125</td>
</tr>
<tr>
<td>How much you have rate your instructor</td>
<td>137</td>
<td>137</td>
<td>117</td>
</tr>
</table>




Answer

You have to loop all elements for the table head and then again for your body. I used a fixed number to loop over your questions here. You can simply modify the filter, tho.

JSFiddle

HTML

<div ng-app="myApp" ng-controller="customersCtrl">
    <table border="1">
        <thead>
        <tr>
            <td>Question</td>
            <td ng-repeat="x in names">{{ x.college }}</td>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="n in [] | range:4">
            <td>
                {{ names[0].program_section[n].question }}
            </td>
            <td width="100px" ng-repeat="x in names">
                {{ x.program_section[n].total }}
            </td>
        </tr>
        </tbody>
    </table>
</div>

Javascript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.names = arr;
}).filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});