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

Question

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>

oshell · Accepted Answer · 2016-03-02 14:33:40Z

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;
  };
});

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related