Gilbert Gilbert - 3 months ago 12
AngularJS Question

AngularJS filling table

I need to create a table with the following object:

this.customer =
[{
cid:"1",
productid:"1",
src:"walmart",
total:"1"
},
{
cid:"1",
productid:"1",
src:"target",
total:"2"
},
{
cid:"1",
productid:"1",
src:"tjmax",
total:"2"
},
{
cid:"1",
productid:"2",
src:"walmart",
total:"1"
},
{
cid:"1",
productid:"2",
src:"target",
total:"4"
},
{
cid:"1",
productid:"2",
src:"tjmax",
total:"0"
},
{
cid:"2",
productid:"1",
src:"walmart",
total:"0"
},
{
cid:"2",
productid:"1",
src:"target",
total:"3"
},
{
cid:"2",
productid:"1",
src:"tjmax",
total:"6"
},
{
cid:"2",
productid:"2",
src:"walmart",
total:"4"
},
{
cid:"2",
productid:"2",
src:"target",
total:"6"
},
{
cid:"2",
productid:"2",
src:"tjmax",
total:"8"
}];


I need to build a table utilizing AngulaJS and Bootstrap; with bootstrap I don't have any problem. I'm trying to use ng-repeat but I'm not getting the result I want. Here is the way I want my table.

+-------------------------------------------+
| cid | productId1 | productId2 |
+-----+------------------+------------------+
| 1 | wal:1,tar:2,tj:2 | wal:1,tar:4,tj:0 |
+-------------------------------------------+
| 2 | wal:0,tar:3,tj:6 | wal:4,tar:6,tj:8 |
+-------------------------------------------+


Can I achieve this with ng-repeat? Any ideas utilizing other directives?

Answer

To construct this table we need to group and filter customer array.

To facilitate the task, you can use angular-filter.

Example on jsfiddle.

angular.module("ExampleApp", ['angular.filter'])
  .controller("ExampleController", function($scope) {
    $scope.customer = [{
      cid: "1",
      productid: "1",
      src: "walmart",
      total: "1"
    }, {
      cid: "1",
      productid: "1",
      src: "target",
      total: "2"
    }, {
      cid: "1",
      productid: "1",
      src: "tjmax",
      total: "2"
    }, {
      cid: "1",
      productid: "2",
      src: "walmart",
      total: "1"
    }, {
      cid: "1",
      productid: "2",
      src: "target",
      total: "4"
    }, {
      cid: "1",
      productid: "2",
      src: "tjmax",
      total: "0"
    }, {
      cid: "2",
      productid: "1",
      src: "walmart",
      total: "0"
    }, {
      cid: "2",
      productid: "1",
      src: "target",
      total: "3"
    }, {
      cid: "2",
      productid: "1",
      src: "tjmax",
      total: "6"
    }, {
      cid: "2",
      productid: "2",
      src: "walmart",
      total: "4"
    }, {
      cid: "2",
      productid: "2",
      src: "target",
      total: "6"
    }, {
      cid: "2",
      productid: "2",
      src: "tjmax",
      total: "8"
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
  <table>
    <tr>
      <th>cid</th>
      <th ng-repeat="(product, value) in customer|groupBy:'productid'">productid{{product}}</th>
    </tr>
    <tr ng-repeat="(cid, value) in customer|groupBy:'cid'">
      <td>{{cid}}</td>
      <td ng-repeat="(product, value) in customer|groupBy:'productid'">
        <span ng-repeat="item in value|filterBy:['cid']:cid">
          {{item.src}}:{{item.total}},
        </span>
      </td>
    </tr>
  </table>
</div>