错误：[orderBy:notarray] 预期的数组但已收到：{}答案

【问题标题】：Error: [orderBy:notarray] Expected array but received: {}错误：[orderBy:notarray] 预期的数组但已收到：{}
【发布时间】：2018-03-16 06:26:23
【问题描述】：

我正在尝试从这里实现分页功能： http://jsfiddle.net/SAWsA/11/

[
  {
    "name": "Micro biology",
    "id": "2747c7ecdbf85700bde15901cf961998",
    "category": "Other",
    "type": "Mandatory - No Certification",
    "categoryid": "808ff269db7cd700bde15901cf9619f3"
  },
  {
    "name": "Java Fundamentals",
    "id": "5475f2a0dbf85700bde15901cf961964",
    "category": "IT",
    "type": "Mandatory - No Certification",
    "categoryid": "2b5e7e29db7cd700bde15901cf961917"
  }
]

我有一个如上所示的对象。

当我 ng-repeat

<tr ng-repeat="skillTestsData in data.skillTests[currentPage] | orderBy:sortingOrder:reverse">

我遇到以下错误：

错误：[orderBy:notarray] 预期的数组，但收到：{“name”：“微生物”，“id”：“2747c7ecdbf85700bde15901cf961998”，“类别”：“其他”，“类型”：“强制 - 无认证","categoryid":"808ff269db7cd700bde15901cf9619f3"}

这是我的 HTML：

<script type="text/javascript">
    var sortingOrder = 'name';
</script>

<tr ng-repeat="skillTestsData in data.skillTests[currentPage] | orderBy:sortingOrder:reverse"> ------- </tr>

这是我的客户端脚本：

function($scope, $filter) {
  c.data.skillTests //which has my object

/*Pagination starts here new one */

// init
$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 5;
$scope.pagedItems = [];
$scope.currentPage = 0;


//$scope.items = [];
$scope.items = c.data.skillTests;
//serach and initialize start
var searchMatch = function (haystack, needle) {
    if (!needle) {
        return true;
    }
    return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
// init the filtered items
$scope.search = function () {
    $scope.filteredItems = $filter('filter')($scope.items, function (item) {
        for(var attr in item) {
            if (searchMatch(item[attr], $scope.query))
            return true;
        }
        return false;
    });
    // take care of the sorting order
    if ($scope.sortingOrder !== '') {
        $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
    }
    $scope.currentPage = 0;
    // now group by pages
    $scope.groupToPages();
};
//serach and initialize end

// calculate page in place
$scope.groupToPages = function () {
    $scope.pagedItems = [];
    for (var i = 0; i < $scope.filteredItems.length; i++) {
        if (i % $scope.itemsPerPage === 0) {
            $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
            } else {
            $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
        }
    }
};
$scope.range = function (start, end) {
    var ret = [];
    if (!end) {
        end = start;
        start = 0;
    }
    for (var i = start; i < end; i++) {
        ret.push(i);
    }
    return ret;
};
$scope.prevPage = function () {
    if ($scope.currentPage > 0) {
        $scope.currentPage--;
    }
};
$scope.nextPage = function () {
    if ($scope.currentPage < $scope.pagedItems.length - 1) {
        $scope.currentPage++;
    }
};
$scope.setPage = function () {
    $scope.currentPage = this.n;
};
// functions have been describe process the data for display
$scope.search();
// change sorting order
$scope.sort_by = function(newSortingOrder) {
    if ($scope.sortingOrder == newSortingOrder)
    $scope.reverse = !$scope.reverse;
    $scope.sortingOrder = newSortingOrder;
    // icon setup
    $('th i').each(function(){
        // icon reset
        $(this).removeClass().addClass('icon-sort');
    });
    if ($scope.reverse)
    $('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-up');
    else
    $('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-down');
};
/*Pagination ends here new one */


}

【问题讨论】：

将data.skillTests[currentPage]更改为data.skillTests
我需要那个，因为分页不起作用
我在更改订单时收到错误angular.min.js:60 ReferenceError: new_sorting_order is not defined'。在您的代码中 new_sorting_order 未在 sort_by 函数中定义。

标签： javascript angularjs object pagination angularjs-orderby

【解决方案1】：

试试这个，从数组中删除 currentPage。

<tr ng-repeat="skillTestsData in data.skillTests | orderBy:sortingOrder:reverse"> ------- </tr>

另一种方式使用limitTo:limit:skip的limit和skip

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="next()">Next</button>
Page :  {{(skip/limit)+1}}
Limit :  {{::limit}}
<ul>
	<li ng-repeat="item in items | limitTo:limit:skip">{{item}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.items = [1,2,3,4,5,6,7,8,9,10];
   	$scope.limit = 2;
   	$scope.skip= 0;
   	$scope.next = function(){
         $scope.skip= $scope.skip+$scope.limit;
    }
   
});
</script>

</body>
</html>

【讨论】：

当我删除分页时，分页将不起作用，我需要不惜一切代价。检查小提琴一次。
@Mrworldwide 我检查了一下，这是数组的数组，数组创建有一些问题。你在哪里定义$scope.data
数据应该像data = { 1: [{ "name": "Micro biology", "id": "2747c7ecdbf85700bde15901cf961998", }], 2: [{ "name": "Java Fundamentals", "id": "5475f2a0dbf85700bde15901cf961964", }] } 但它是[{ "name": "Micro biology", "id": "2747c7ecdbf85700bde15901cf961998", }]
你的评论帮我找到了答案！