Pagination of nested objects in angular js

Question

I am starting out with angular and I have a nested object which i would like to paginate. The items to be paginated are some of the 'attributes' in the given object. The queuelist object is nested with array within array. Any help would be appreciated. The plunker link for non-paginated data is:

https://plnkr.co/edit/zgo0msd6y5ba6DJ6qGlc?p=preview

app.js:

var app = angular.module("myApp",[])
                 .controller("mycontroller",['$scope',function($scope){

  $scope.queuelist = [
  {
    "name": "ONE",
    "QueueList": [
      {
        "id": 1,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:64"
      },
      {
        "id": 2,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:65"
      },
      {
        "id": 3,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:66"
      }
    ],
    "$$hashKey": "object:59"
  },
  {
    "name": "TWO",
    "QueueList": [
      {
        "id": 4,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:72"
      },
      {
        "id": 5,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:73"
      },
      {
        "id": 6,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:74"
      },
      {
        "id": 7,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:75"
      }
    ],
    "$$hashKey": "object:60"
  }
];


  $scope.objects = [];


   /*                  
  for(i=0;i<$scope.data.length;i++){
      $scope.data2.push($scope.data[i].QueueList);
  };
   */

    for(i=0;i<$scope.queuelist.length;i++){
      for(j=0;j<$scope.queuelist[i].QueueList.length;j++){
          $scope.objects.push($scope.queuelist[i].QueueList[j].attributes);
      };
    };              
   }])

and index.html:



    
        
        
        
    
    
        

            
                {{queueJob.name}}
                


                    
                        
                            a
                            b
                            c
                            e
                            f
                        
                    
                    
                        
                            {{queue.attributes.a}}
                            {{queue.attributes.b}}
                            {{queue.attributes.c}}
                            {{queue.attributes.e}}
                            {{queue.attributes.f}}

Matthew Cawley · Accepted Answer

You can do this using a combination of:

A custom filter (to determine how many records to skip), and...
The built in limitTo filter (to limit the number of records to the desired page size)

1) First create the custom filter.

app.filter("startFrom", function thisFilter() {
  return function(input, index) {
    return input.slice(parseInt(index));
  };
});

The filter takes in an index which it goes on to use in the Array.prototype.slice() method. The slice() method slices the array at the given index and returns a new array containing all remaining objects. The filter returns the new array.

2) Use the custom filter and built-in limitTo filter in the ng-repeat directive.

Here we use the newly created startFrom custom filter passing it the queueJob.pageIndex property as the filter's index parameter. We pass the results of the startFrom filter onto the limitTo filter which reduces the number of records to 1.

Note: We have to use the pageIndex property on the queueJob itteration variable because this ng-repeat is contained within another ng-repeat and so a $scope.pageIndex variable would have been conflicted and subsequently overwritten.

3) Create next and previous buttons


  
    
    
    Page {{ queueJob.pageIndex + 1 }}

Here we use ng-click directives to invoke controller functions that increment/decrement the queueJob object's pageIndex property. We also use ng-disabled directives to prevent navigating next/previous if the user is on the first/last record.

4) Create the bindable functions in the controller

$scope.onPrevClicked = onPrevClicked;
$scope.onNextClicked = onNextClicked;
$scope.isFirst = isFirst;
$scope.isLast = isLast;

function onPrevClicked(obj) {
  if (!isFirst(obj)) obj.pageIndex--;
}

function onNextClicked(obj) {
  if (!isLast(obj)) obj.pageIndex++;
}

function isFirst(obj) {
  return obj.pageIndex === 0;
}

function isLast(obj) {
  return obj.pageIndex + 1 === obj.QueueList.length;
}

5) Initialise the pageIndex properties upfront

$scope.queuelist.forEach(function(obj) {
  obj.pageIndex = 0;
});

This initialised the pageIndex as a number that can be incremented and subsequently decremented.

Demo

CodePen: Using a custom filter to do pagination

Pagination of nested objects in angular js

Answers (1)

Related Questions