javascript - array.slice() not functioning if I have it start from anything but 0 - Stack Overflow

admin管理员组

文章数量:1390913

I have a list of 8 objects in an array called $scope.results, I also have a selectAll() function that I am currently trying to make work with my custom simple pagination.

Please do not ment saying I should use bootstrap pagination for angularjs, I made my own and it does what I need it to do.

$scope.results = [
      {
        "devID": "1",
        "devName": "item 1",
        "desc": "sample desc"
      },
      {
        "devID": "2",
        "devName": "item 2",
        "desc": "sample desc"
      },
      {
        "devID": "3",
        "devName": "item 3",
        "desc": "sample desc"
      },
      {
        "devID": "4",
        "devName": "item 4",
        "desc": "sample desc"
      },
      {
        "devID": "5",
        "devName": "item 5",
        "desc": "sample desc"
      },
      {
        "devID": "6",
        "devName": "item 6",
        "desc": "sample desc"
      },
      {
        "devID": "7",
        "devName": "item 7",
        "desc": "sample desc"
      },
      {
        "devID": "8",
        "devName": "item 8",
        "desc": "sample desc"
      }
    ];

I have an empty object called $scope.deleteList = {} which selectAll() fills with ID's.

This is my $scope.selectAll() (with added console logs for me to see whats happening):

    $scope.selectAll = function(){


        $scope.resultsToDelete = $scope.results.slice(($scope.currentPage * $scope.pageSize), $scope.pageSize);
        console.log("$scope.results:", $scope.results);
        console.log("$scope.currentPage:", $scope.currentPage);
        console.log("$scope.pageSize:", $scope.pageSize);
        console.log("$scope.currentPage * $scope.pageSize:", ($scope.currentPage * $scope.pageSize));


        for (var i = 0; i < $scope.resultsToDelete.length; i++) {
            var item = $scope.resultsToDelete[i]; 
            $scope.devDelList[item.devID] = true;
        }



    };

($scope.currentPage * $scope.pageSize) gives me the index of the first object on the next page of my list.

And this is my pagination:

    $scope.pagination = function(itemList) {
        $scope.currentPage = 0;
        $scope.pageSize = 4;
        $scope.numOfPages = Math.ceil(itemList.length / $scope.pageSize);
        $scope.pageNumbersArray = [];

        for (var i = 0; i <= $scope.numOfPages -1 ; i++) {
            $scope.pageNumbersArray.push(i);
        }
    }($scope.results)



$scope.prev = function() {
    if ($scope.currentPage > 0) {
        $scope.currentPage = -- $scope.currentPage;
    }
}

$scope.next = function() {
    if ($scope.currentPage < $scope.numOfPages - 1 ) {
        $scope.currentPage = ++ $scope.currentPage;
    }
}

$scope.goToPage = function(pageNum) {
    $scope.currentPage = pageNum;
}

My issue is with the .slice() on the results array. It works fine for the first page only - when $scope.currentPage = 0. As soon as $scope.currentPage = 1, $scope.results.slice() returns an empty array.

$scope.results.slice(0, 4) returns the correct IDs for the first page of 4 items.

$scope.results.slice(4, 4) returns an empty array. (e.g. []), it does not return the second set of 4 items

What am I missing?

I have a list of 8 objects in an array called $scope.results, I also have a selectAll() function that I am currently trying to make work with my custom simple pagination.

Please do not ment saying I should use bootstrap pagination for angularjs, I made my own and it does what I need it to do.

$scope.results = [
      {
        "devID": "1",
        "devName": "item 1",
        "desc": "sample desc"
      },
      {
        "devID": "2",
        "devName": "item 2",
        "desc": "sample desc"
      },
      {
        "devID": "3",
        "devName": "item 3",
        "desc": "sample desc"
      },
      {
        "devID": "4",
        "devName": "item 4",
        "desc": "sample desc"
      },
      {
        "devID": "5",
        "devName": "item 5",
        "desc": "sample desc"
      },
      {
        "devID": "6",
        "devName": "item 6",
        "desc": "sample desc"
      },
      {
        "devID": "7",
        "devName": "item 7",
        "desc": "sample desc"
      },
      {
        "devID": "8",
        "devName": "item 8",
        "desc": "sample desc"
      }
    ];

I have an empty object called $scope.deleteList = {} which selectAll() fills with ID's.

This is my $scope.selectAll() (with added console logs for me to see whats happening):

    $scope.selectAll = function(){


        $scope.resultsToDelete = $scope.results.slice(($scope.currentPage * $scope.pageSize), $scope.pageSize);
        console.log("$scope.results:", $scope.results);
        console.log("$scope.currentPage:", $scope.currentPage);
        console.log("$scope.pageSize:", $scope.pageSize);
        console.log("$scope.currentPage * $scope.pageSize:", ($scope.currentPage * $scope.pageSize));


        for (var i = 0; i < $scope.resultsToDelete.length; i++) {
            var item = $scope.resultsToDelete[i]; 
            $scope.devDelList[item.devID] = true;
        }



    };

($scope.currentPage * $scope.pageSize) gives me the index of the first object on the next page of my list.

And this is my pagination:

    $scope.pagination = function(itemList) {
        $scope.currentPage = 0;
        $scope.pageSize = 4;
        $scope.numOfPages = Math.ceil(itemList.length / $scope.pageSize);
        $scope.pageNumbersArray = [];

        for (var i = 0; i <= $scope.numOfPages -1 ; i++) {
            $scope.pageNumbersArray.push(i);
        }
    }($scope.results)



$scope.prev = function() {
    if ($scope.currentPage > 0) {
        $scope.currentPage = -- $scope.currentPage;
    }
}

$scope.next = function() {
    if ($scope.currentPage < $scope.numOfPages - 1 ) {
        $scope.currentPage = ++ $scope.currentPage;
    }
}

$scope.goToPage = function(pageNum) {
    $scope.currentPage = pageNum;
}

My issue is with the .slice() on the results array. It works fine for the first page only - when $scope.currentPage = 0. As soon as $scope.currentPage = 1, $scope.results.slice() returns an empty array.

$scope.results.slice(0, 4) returns the correct IDs for the first page of 4 items.

$scope.results.slice(4, 4) returns an empty array. (e.g. []), it does not return the second set of 4 items

What am I missing?

• javascript
• angularjs
• arrays
• pagination

Share Improve this question Follow edited Apr 9, 2017 at 9:07 Martin Doychinov asked Apr 9, 2017 at 9:04 Martin DoychinovMartin Doychinov 8377 bronze badges 2

• 1 "Please do not ment saying I should use bootstrap pagination for angularjs, I made my own and it does what I need it to do." That kind of thing is not useful, and probably makes people walk away from the question without bothering to read further and answer it. – T.J. Crowder Commented Apr 9, 2017 at 9:10
• I disagree, it is useful to me because I know people will digress and not actually answer my question, but rather go on about how I can do other things better, which I don't need right now. – Martin Doychinov Commented Apr 9, 2017 at 9:14

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

$scope.results.slice(4, 4) returns an empty array. (e.g. [])

As per documentation

Zero-based index before which to end extraction. slice extracts up to but not including end.

For example, slice(1,4) extracts the second element through the fourth element (elements indexed 1, 2, and 3).

So, from 4 to 4 should be 0 only.

You need to try

var startIndex = $scope.currentPage * $scope.pageSize;
var endIndex = ($scope.currentPage * $scope.pageSize) + $scope.pageSize;
$scope.resultsToDelete = $scope.results.slice( startIndex, endIndex );

Take a look at the slice documentation.

The seconds argument is not the length, but it is the end index.

Say you have an array:

a = [1,2,3,4]

If you wanted to select [3,4]

Then you would have to tun slice with slice(2,4) and not slice(2,2)

You should fix your code to be something like:

res = $scope.results.slice(($scope.currentPage * $scope.pageSize),
    $scope.currentPage * $scope.pageSize + $scope.pageSize);

anArray.slice(n, n) will always return an empty array. The arguments for slice are (begin, end) where begin is the start index and the end is the end index, not the length for the slice.

In your case you would want something like this:

var start = $scope.currentPage * $scope.pageSize;
var end = start + $scope.pageSize;

$scope.resultsToDelete = $scope.results.slice( start, end );

its because The Slice method works on zero based Index See documentation here

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included).

so, for array.slice(begin,end);

begin : Zero-based index at which to begin extraction.

end : Zero-based index before which to end extraction. slice extracts up to but not including end.

so for eg.

var arr  = [1,2,3,4];

when we say arr.slice(1,3); it means get all elements starting from index 1 to index 4 also exclude value at index 4 so result is [2,3]

and when we say arr.slice(1,1); its like get all element from index 1 to index 1 also exclude value at index 1 so result is [] empty array

本文标签： javascriptarrayslice() not functioning if I have it start from anything but 0Stack Overflow