Получить следующие 'n' строки из массива объектов

Question

У меня есть массив объектов:

[
{ID: "1234", FName: "Steve", LName: "Adams", Status: "New",CreatedBy: "sadams"},
{ID: "5648", FName: "Jon", LName: "Lewis", Status: "New",CreatedBy: "jlewis"},
{ID: "9872", FName: "Hor", LName: "Mt", Status: "Open",CreatedBy: "hmt"},
{ID: "1212", FName: "Allison", LName: "Pan", Status: "New",CreatedBy: "apan"},
...
...so on
]

Эти данные возвращаются из моего API и могут быть сотнями.

Теперь я использую простую таблицу HTML без какой-либо третьей стороныисточники, чтобы показать эти данные на экране, и я использую ng-repeat в angularjs, чтобы связать эти данные с таблицей.Из-за большого количества данных я не хочу загружать все данные сразу на экран.Я просто хочу загрузить первые 50 строк, а затем добавить ссылку «Показать следующие 50».Нажав на то, что следующие 50 строк будут помещены в массив и т. Д.

Это то, что у меня есть в настоящее время

$http.get('https://myApi').success(function(data) {
    var arr = [];

    //This holds all the data returned
    $scope.dataFromApi = data;

    for (var j = 0; j < 50; j++) {
        //This holds the first 50 rows
        arr.push(data[j]);
    }   

    //This is binding back to the UI
    $scope.tableData = arr;

 }

  $scope.buttonClick = function () {
      //How can I get the next 50 rows from $scope.dataFromApi and add it to $scope.tableData   
  }

Как я могу получать следующие 50 строк каждый раз на кнопкещелкните и добавьте к существующему массиву.

Обратите внимание, что в данный момент я не ищу никаких сторонних источников или методов разбивки на страницы.

--- Обновлено ---

Для всех, кто ищет это.Я получил разрешение:

Создание пользовательского фильтра (как я использую angularjs 1.3.4) как:

app.filter('myLimitTo', function() {
  return function(input, limit, begin) {
    return input.slice(begin, begin + limit);
  };
});

В моем html:

  <tr ng-repeat="r in datarows | myLimitTo:limit:start">

Контроллер:

 $scope.start = 0;
 $scope.limit = 10;

 $scope.next = function () {
        incrementLimit(true)
    }
    $scope.prev = function () {
        incrementLimit(false)
    }

    function incrementLimit(up) {
        if (up) {
            ($scope.start <= ($scope.data.rows.length - $scope.limit)) ? $scope.start += 10 : $scope.start = 0;
        } else {
            $scope.start > 10 ? $scope.start -= 10 : $scope.start = 0;

        }
    }

Answer 1

почему бы не выполнить подкачку страниц в бэкэнде, а затем просто получить данные со страницы?если вы хотите настаивать на этом, вы можете извлечь цикл for как функцию, которая принимает страницу в качестве аргумента, например:

const pushDataToTableData = (page, perpage = 50) => {
  arr.push(data.slice(page * perpage, (page + 1) * perpage));
}

вызовите один раз при успешном обратном вызове, затем при нажатии page++ ивызвать эту функцию

Answer 2

Это типичный вариант использования, известный как pagination.Идея состоит в том, чтобы сохранить текущую страницу и текущий размер страницы (50 в вашем случае) в переменной и ссылаться на это значение, когда пользователь выбирает следующий / предыдущий.Так что вы будете делать что-то вроде

app.controller('someController', ['$scope', '$http', function($scope, $http){
  $scope.currentPage = 1;
  $scope.numberOfRecordsPerPage = 50;

  $http.get('https://myApi').success(function(data) {
    // ...
    $scope.dataFromApi = data;
    $scope.tableData = data.slice(0, $scope.numberOfRecordsPerPage);
  }

  $scope.buttonClick = function () {
    $scope.currentPage++;

    const startIndex = ($scope.currentPage * $scope.numberOfRecordsPerPage) + 1;
    // if current page is 1, then startIndex will be (1*50)+1 = 51
    // if current page is 2, then startIndex will be (2*50)+1 = 101
    // and so on.

    //Now slice the array from startIndex

    $scope.tableData = data.slice(startIndex, $scope.numberOfRecordsPerPage);
  }

  //similarly you can do so if you want to go back to previous page

  $scope.buttonClickPrev = function () {
    $scope.currentPage--; // in this case you will subtract value by 1

    const startIndex = ($scope.currentPage * $scope.numberOfRecordsPerPage) + 1;    
    $scope.tableData = data.slice(startIndex, $scope.numberOfRecordsPerPage);
  }

}]);

Answer 3

Используйте фильтр limitTo:

https://docs.angularjs.org/api/ng/filter/limitTo

HTML:

{{ limitTo_expression | limitTo : limit : begin}}

JS:

$filter('limitTo')(input, limit, begin)

В вашем случаепредел будет равен 50, и вы можете изменить начало с помощью функции buttonClick.

Не забудьте также добавить track by в повторитель с некоторым идентификатором / уникальным из данных, возвращаемых из API.