How to bring the particular record to the last row of the table using custom filter in Angularjs?

Question

I'm working on angularjs, I need to use custom filter to bring the particular record to the last row of the table. But, failing to do it.

Here is the Html and the script i'm using

<table class="table table-bordered">
  <thead ng-hide="content == 'true'">
    <tr>
      <th th-sort by="order" reverse="reverse" order="'bucket'">Bucket</th>
      <th th-sort by="order" reverse="reverse" order="'product'">Product</th>
      <th th-sort by="order" reverse="reverse" order="'countOfAllocatedAccount'">Allocated # </th>
      <th th-sort by="order" reverse="reverse" order="'countOfCollectedAccount'">Collected #</th>
      <th th-sort by="order" reverse="reverse" order="'countOfPendingCollectionOfAccounts'">Pending #</th>
    </tr>
  </thead>

  <thead ng-show="content == 'true'"> 
    <tr>
      <th th-sort by="order" reverse="reverse" order="'bucket'">Bucket</th>
      <th th-sort by="order" reverse="reverse" order="'product'">Product</th>
      <th th-sort by="order" reverse="reverse" order="'sumOfAllocatedAccount'">Total Allocated Amount</th>
      <th th-sort by="order" reverse="reverse" order="'sumOfCollectedAccount'">Total Collected Amount</th>
      <th th-sort by="order" reverse="reverse" order="'sumOfPendingAllocatedAndCollectedAmounts'">Total Pending Amount </th>
    </tr>
  </thead>

  <tbody>
    <tr ng-hide="content == 'true'" ng ng-repeat='p in view_data | orderByValue'>
      <td><span>{{p.pseudoBucket}}</span></td>
      <td><span>{{p.product}}</span></td>
      <td><span>{{p.countOfAllocatedAccount}}</span></td>
      <td><span>{{p.countOfCollectedAccount}}</span></td>
      <td><span>{{p.countOfPendingCollectionOfAccounts}}</span></td>
    </tr>
    <tr ng-show="content == 'true'" ng-repeat='p in view_data'>                          
      <td><span >{{p.pseudoBucket}}</span></td>
      <td><span>{{p.product}}</span></td>
      <td><span>{{p.sumOfAllocatedAccount}}</span></td>
      <td><span>{{p.sumOfCollectedAccount}}</span></td>
      <td><span>{{p.sumOfPendingAllocatedAndCollectedAmounts}}</span></td>
    </tr>
  </tbody>
</table>

And the custom filter :

CollectApp.filter('orderByValue', function() {
  //$scope.reverse = true;
  alert("Rajini");
  return function(items, field) {
    var filtered = [],
      filteredX = [];
    angular.forEach(items, function(p) {
      if (p.pseudoBucket == ">90") {
        filteredX.splice(0, 0, p);
      } else if (p.pseudoBucket.indexOf(">") == -1) {
        filtered.push(p);
      } else {
        filteredX.push(p);
      }
    });
    angular.forEach(filtered, function(p) {
      filteredX.push(p);
    });
    return filteredX;
    //console.log("hi");
  };
});

And let me share the image of the output i'm getting now.

I would like to bring the ">90" to the last row. Can anyone help me?

Answer 1

I think that your problem is that for some of your data elements you don't have a pseudoBucket value

 var data =[{"product":"SBHL","bucket":">90","pseudoBucket":">90","countOfAllocatedAccount":3005,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":3005,"sumOfAllocatedAccount":60549185,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":60549185},{"product":"SBHL+","bucket":">90","pseudoBucket":"","countOfAllocatedAccount":321,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":321,"sumOfAllocatedAccount":23987045,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":23987045},{"product":"SBML","bucket":">90","pseudoBucket":"","countOfAllocatedAccount":732,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":732,"sumOfAllocatedAccount":109971610,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":109971610},{"product":"SBML+","bucket":">90","pseudoBucket":"","countOfAllocatedAccount":31,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":31,"sumOfAllocatedAccount":18662882,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":18662882},{"product":"SBML+","bucket":"1-30","pseudoBucket":"1-30","countOfAllocatedAccount":42,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":42,"sumOfAllocatedAccount":1470250,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":1470250},{"product":"SBML","bucket":"1-30","pseudoBucket":"","countOfAllocatedAccount":942,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":942,"sumOfAllocatedAccount":11904428,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":11904428},{"product":"SBHL+","bucket":"1-30","pseudoBucket":"","countOfAllocatedAccount":596,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":596,"sumOfAllocatedAccount":3961615,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":3961615},{"product":"SBHL","bucket":"1-30","pseudoBucket":"","countOfAllocatedAccount":4810,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":4810,"sumOfAllocatedAccount":14549696,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":14549696},{"product":"SBHL","bucket":"31-60","pseudoBucket":"31-60","countOfAllocatedAccount":1610,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":1610,"sumOfAllocatedAccount":9369038,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":9369038},{"product":"SBHL+","bucket":"31-60","pseudoBucket":"","countOfAllocatedAccount":182,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":182,"sumOfAllocatedAccount":2353302,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":2353302},{"product":"SBML","bucket":"31-60","pseudoBucket":"","countOfAllocatedAccount":275,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":275,"sumOfAllocatedAccount":7096213,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":7096213},{"product":"SBML+","bucket":"31-60","pseudoBucket":"","countOfAllocatedAccount":16,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":16,"sumOfAllocatedAccount":1147017,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":1147017},{"product":"SBML+","bucket":"61-90","pseudoBucket":"61-90","countOfAllocatedAccount":10,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":10,"sumOfAllocatedAccount":1191800,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":1191800},{"product":"SBML","bucket":"61-90","pseudoBucket":"","countOfAllocatedAccount":184,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":184,"sumOfAllocatedAccount":7378650,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":7378650},{"product":"SBHL+","bucket":"61-90","pseudoBucket":"","countOfAllocatedAccount":79,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":79,"sumOfAllocatedAccount":1618234,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":1618234},{"product":"SBHL","bucket":"61-90","pseudoBucket":"","countOfAllocatedAccount":793,"countOfCollectedAccount":0,"countOfPendingCollectionOfAccounts":793,"sumOfAllocatedAccount":6799247,"sumOfCollectedAccount":0,"sumOfPendingAllocatedAndCollectedAmounts":6799247}] // I think that your problem is that for some of your data elements you don't have a pseudoBucket value // So it puts the >90 into your normal filtered array. var fx = [], f = []; data.forEach(el => { // Added the el.bucket check here too if (el.pseudoBucket == ">90" || el.bucket == ">90") { fx.splice(0, 0, el); } else if (el.pseudoBucket.indexOf(">") == -1) { f.push(el); } else { fx.push(el); } }); f = f.concat(fx); // will print out in order >90 being last f.forEach(el => console.log(el.pseudoBucket));