Not able to display correct data in table -AngularJS

Question

Below is my plunker where I have tried to display the data under each category.But the data are not printing as supposed to .Example:-rom value 12345 should come directly under bread. I'm not sure where I'm doing wrong in my code:

  $scope.allProducts = [];
  angular.forEach($scope.data,function(item, index){
    angular.forEach(item.products, function(item2, index){
      if($scope.allProducts.indexOf(item2.consummable) == -1){
        $scope.allProducts.push(item2.consummable);
      }
    })
  })

Creating a table matrix

give us full info, the json response example, the code of request to backend and etc. — num8er, Sep 11 '15 at 06:44
JSON is there in the plunker.The arrangement of data in the table is what is needed — forgottofly, Sep 11 '15 at 06:54
`ng-repeat` not do somthing except simple loop, so if your `item` have one _product_ it render just one _cell_. So you need pre-process your data, or change expression for `ng-repeat` :-) — Grundy, Sep 11 '15 at 07:04
sorry but I can not figure it out how you want your table to looks like ?! — macrog, Sep 11 '15 at 07:07
Example: rom value 1 should be under 100-milk ie.,(1*1).rom value 12345 should be under 200-bread — forgottofly, Sep 11 '15 at 07:12

score 2 · Accepted Answer · answered Sep 11 '15 at 07:14

Yet another variant with changed ng-repeat expression. Since you repeat allProducts in first line, you need repeat it and in others, and filter data for selected value. See code snippet below

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.data =[
    {
        "resource": "100",
        products: [
            {
                "consummable": "milk",
                 "rom": 1
            },
         
        ]
    },
    {
        "resource": "200",
        products: [
        
            {
                "consummable": "bread",
                 "rom": 12345
            },
           
        ]
    },
    {
        "resource": "300",
        products: [
      
            {
                "consummable": "butter",
                 "rom": 123456789
            }
        ]
    }
];

  $scope.allProducts = [];
  angular.forEach($scope.data,function(item, index){
    angular.forEach(item.products, function(item2, index){
      if($scope.allProducts.indexOf(item2.consummable) == -1){
        $scope.allProducts.push(item2.consummable);
      }
    })
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <table style="border:1px solid red;">
    <tr>
      <td>
      </td>
      <td ng-repeat="itemProd in allProducts" style="border:1px solid red;">
        {{itemProd}}
      </td>
    </tr>
    <tr ng-repeat="item in data">
      <td>
        {{item.resource}}
      </td>
      <td ng-repeat="item2 in allProducts" style="border:1px solid red;" ng-init="product=(item.products | filter: {consummable:item2})[0]">
        <a>{{product.rom}}</a>
      </td>
    </tr>
  </table>
  {{allProducts}}
  {{data}}
  
</div>

Grundy,can you plesae explain the filter? filter: {consummable:item2})[0] — forgottofly, Sep 11 '15 at 10:21
@forgottofly, sure: [filter](https://docs.angularjs.org/api/ng/filter/filter) is standart filter, we pass object as paramter that means find objects where `consummable` property is same as `item2`, and so filter return array filtered elements, we simple try get first — Grundy, Sep 11 '15 at 10:30
how can we support column grouping ? Do we need to add the column in json data from which we need to group the columns — anmrk, May 24 '17 at 04:36
@anmrk, what you mean _support column grouping_? Possibly better [ask new question](https://stackoverflow.com/questions/ask) with explain problem — Grundy, May 24 '17 at 06:10

score 0 · Answer 2 · answered Sep 11 '15 at 07:07

Please check the structure :

 <table style="border : 1px solid">
<tr>
  <td></td>
  <td ng-repeat="product in allProducts">
    {{product.consummable}}
  </td>
</tr>
<tr ng-repeat="test in data">

  <td>{{test.resource}}</td>
  <td ng-repeat="pro in allProducts">{{pro.rom}}</td>
</tr>

And just push item2 in allProducts instead of consummable field only :

 angular.forEach($scope.data,function(item, index){
angular.forEach(item.products, function(item2, index){
  if($scope.allProducts.indexOf(item2.consummable) == -1){
    $scope.allProducts.push(item2); // Here I have pushed item2 instead of item2.consummable
  }
})

})

Plunker : http://plnkr.co/edit/YWPL2EmKK6MIwIkevZ1W?p=preview

Here its printing all the values in the table.I want to print only the specific value under each heading.Example: rom value 1 should be under 100-milk ie.,(1*1).rom value 12345 should be under 200-bread — forgottofly, Sep 11 '15 at 07:12

score 0 · Answer 3 · answered Sep 11 '15 at 07:55

The solution for what you need is the following:

1) keep the allProducts generation like this:

  $scope.allProducts = [];
  angular.forEach($scope.data,function(item, index){
    angular.forEach(item.products, function(item2, index){
      if($scope.allProducts.indexOf(item2.consummable) == -1){
        $scope.allProducts.push(item2.consummable);
      }
    })
  })

2) Add this in your controller:

$scope.getColumnValue = function(item,item2, index) {
   var returnVal;
    angular.forEach(item.products, function(val, index){
     if(item2 == val.consummable){
       returnVal = val.rom;
     }
   })
   return returnVal;
 }

3) The table generation will be:

<table style="border:1px solid red;">
   <tr>
     <td>
     </td>
     <td ng-repeat="itemProd in allProducts" style="border:1px solid red;">
       {{itemProd}}
     </td>
   </tr>
   <tr ng-repeat="item in data">
     <td>
       {{item.resource}}
     </td> 
     <td ng-repeat="item2 in allProducts" style="border:1px solid red;">
       <a>{{getColumnValue(item, item2)}}</a>
      </td>
   </tr>
 </table>

Not able to display correct data in table -AngularJS

3 Answers3

Linked