AngularJS + Parse REST API - 通过1,000多个结果进行分页

时间:2015-03-11 12:42:24

标签: json angularjs rest parse-platform

我使用Parse REST API + AngularJS,我试图每个查询获得超过1000个项目。我尝试开发一个递归函数并连接每个查询,直到我得到所有数据。我的问题是我无法成功连接JSON对象。这就是我所拥有的:

    $scope.getAllItems = function(queryLimit, querySkip, query) {
        $http({method : 'GET',
            url : 'https://api.parse.com/1/classes/myClass', 
            headers: { 'X-Parse-Application-Id':'XXX','X-Parse-REST-API-Key':'YYY'},
            params: {limit:queryLimit, skip:querySkip},

        }).success(function(data, status) {
                query.concat(data.results); 
                if(query.lenth == queryLimit) {
                    querySkip += queryLimit;
                    queryLimit += 100;
                    $scope.getAllItems(queryLimit, querySkip, query);
                } else {
                    $scope.clients = query;
                }

            })
            .error(function(data, status) {
                alert("Error");
            });
    };
    var myQuery = angular.toJson([]); //Am I creating an empty JSON Obj?
    $scope.getAllItems(100,0, myQuery);

有没有更好的解决方案来实现这一目标?

2 个答案:

答案 0 :(得分:1)

可能有更好,更简洁的想法,但这是我为自己制定的。

在我的服务中......

fetch : function(page, perpage) {
    var query = // build the query
    // the whole answer to your question might be this line:
    query.limit(perpage).skip(page*perpage);
    return query.find();
},

fetchCount : function() {
    var query = // build the same query as above
    return query.count();
},

在控制器......

$scope.page = 0;       // the page we're on
$scope.perpage = 30;   // objects per page

MyService.fetchCount().then(function(count) {
    var pagesCount = Math.ceil(count / $scope.perpage);
    $scope.pages = [];
    // pages is just an array of ints to give the view page number buttons
    for (var i=0; i<pagesCount; i++) { $scope.pages.push(i); }
    fetch();
});

function fetch() {
    return MyService.fetch($scope.page, $scope.perpage)).then(function(results) {
        $scope.results = results;
    });
}

// functions to do page navigation
$scope.nextPage = function() {
    $scope.page += 1;
    fetch();
};

$scope.prevPage = function() {
    $scope.page -= 1;
    fetch();
};

$scope.selectedPage = function(p) {
    $scope.page = p;
    fetch();
};

然后在我的视图中分页按钮和结果(bootstrap.css)......

<ul class="pagination">
    <li ng-click="prevPage()" ng-class="(page==0)? 'disabled' : ''"><a>«</a></li>
    <li ng-repeat="p in pages" ng-click="selectedPage(p)" ng-class="(page==$index)? 'active' : ''"><a>{{p+1}}</a></li>
    <li ng-click="nextPage()" ng-class="(page>=pages.length-1)? 'disabled' : ''"><a>»</a></li>
</ul>

<ul><li ng-repeat="result in results"> ... </li></ul>

答案 1 :(得分:1)

我修复了我的递归函数,现在它正在工作。这是:

$scope.getAllItems = function(queryLimit, querySkip, query, first) {

        $http({method : 'GET',
            url : 'https://api.parse.com/1/classes/myClass', 
            headers: { 'X-Parse-Application-Id':'XXX','X-Parse-REST-API-Key':'YYY'},
            params: {limit:queryLimit, skip:querySkip},

        }).success(function(data, status) {
                if(first) {
                    query = data.results;
                    first = !first;
                    if(query.length == queryLimit) {
                        querySkip += queryLimit;
                        $scope.getAllItems(queryLimit, querySkip, query, first);
                    } else {
                        $scope.clients = query;
                    }
                } else {
                    var newQ = data.results;
                    for (var i = 0 ; i < newQ.length ; i++) {
                      query.push(newQ[i]);
                    }
                    if(query.length == queryLimit + querySkip) {
                        querySkip += queryLimit;
                        $scope.getAllItems(queryLimit, querySkip, query, first);
                    } else {
                        $scope.clients = query;
                    }
                }
            })
            .error(function(data, status) {
                alert("Error");
            });
    };

只需将每个元素推送到我的空数组,我也在改变queryLimit而不是querySkip,以便遍历所有元素。