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
– num8er, Commented Sep 11, 2015 at 6:44
JSON is there in the plunker.The arrangement of data in the table is what is needed — forgottofly
– forgottofly, Commented Sep 11, 2015 at 6: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
– Grundy, Commented Sep 11, 2015 at 7:04
sorry but I can not figure it out how you want your table to looks like ?! — macrog
– macrog, Commented Sep 11, 2015 at 7:07
Example: rom value 1 should be under 100-milk ie.,(1*1).rom value 12345 should be under 200-bread — forgottofly
– forgottofly, Commented Sep 11, 2015 at 7:12

Grundy · Accepted Answer · 2015-09-11 07:14:27Z

2

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>

answered Sep 11, 2015 at 7:14

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

forgottofly Over a year ago

Grundy,can you plesae explain the filter? filter: {consummable:item2})[0]

Grundy Over a year ago

@forgottofly, sure: 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

forgottofly Over a year ago

Thanks Grundy,Well explained

anmrk Over a year ago

how can we support column grouping ? Do we need to add the column in json data from which we need to group the columns

Grundy Over a year ago

@anmrk, what you mean support column grouping? Possibly better ask new question with explain problem

binariedMe · Accepted Answer · 2015-09-11 07:07:29Z

0

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

answered Sep 11, 2015 at 7:07

binariedMe

4,3291 gold badge20 silver badges34 bronze badges

1 Comment

forgottofly Over a year ago

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

Diana R · Accepted Answer · 2015-09-11 07:55:51Z

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>

Collectives™ on Stack Overflow

Not able to display correct data in table -AngularJS

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related