AngularJS filling table

Question

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?

Update 1 SEP 2016

Building this app I create a js object to simulate the json I will bet from a web service. After I got help here, I was able to finish my html. I fired up the web service to get the real data. Now the table is not getting filled with data. I opened dev tools to check for errors and I have 0 error. I also checked Network and Responses and the json object is coming through, so I have no problems with my web service. What might be wrong? Here is my $http code.

(function () {
'use strict';
var app =   angular.module('myApp', ['angular.filter']);
// Declare app level module which depends on views, and components
app.controller('CustomerTable', function ($scope, $http) {

    // GET request example:
    $http({
        method: 'GET',
        url: '../_includes/web_service_person.php'
    }).then(function successCallback(data) {
        $scope.customer = data;
    }, function errorCallback(data) {
        console.log(":(");
    });
});

})();

I also <pre>{{customer | json}}<?pre> and I can see the json object coming through. All I'm getting in my table is undefined. How can I get my data in the table?

Answer 1

This is an update of my own question.

After doing some research for several days I tweaked the $http code to solve my problem. The code is the following:

$http({
        method: 'GET',
        url: 'path'
    }).then(function successCallback(response) {
        $scope.customer = response.data;
        console.log(response.data);
    }, function errorCallback(response) {
        console.log(":(");
    });

Thanks to @Stepan Kasyanenko I got the data in the table the way was required. Thanks to Peter, a friend of mine, that helped with the web service.

Answer 2

Try this :-

<table>
  <thead>
    <th>  cid </th>
    <th>  productId1 </th>
    <th>  productId2 </th>
  </thead>

  <tbody>
    <tr ng-repeat="customer">
      <td>{{customer.cid }}</td>
      <td>{{customer.productId1 }}</td>
      <td>{{customer.productId2 }}</td>
    </tr>
  </tbody>
</table>

Answer 3

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>