Question

我正在尝试为我的表创建分页，列出从我的数据库返回的对象作为对象。我的数据结构如下所示：

$scope.myJSONObj = {
    app1: {
      id: 1,
      appName: "appIntegrated1",
      status: "Pending"
    },
    app2: {
      id: 2,
      appName: "appIntegrated2",
      status: "Pending"
    },
    app3: {
      id: 3,
      appName: "appIntegrated3",
      status: "Completed"
    },
    app4: {
      id: 4,
      appName: "appIntegrated4",
      status: "Pending"
    },
    app5: {
      id: 5,
      appName: "appIntegrated5",
      status: "Pending"
    },
    app6: {
      id: 6,
      appName: "appIntegrated6",
      status: "Pending"
    },
    app7: {
      id: 7,
      appName: "appIntegrated7",
      status: "Pending"
    },
    app8: {
      id: 8,
      appName: "appIntegrated8",
      status: "Pending"
    },
    app9: {
      id: 9,
      appName: "appIntegrated9",
      status: "Pending"
    },
    app10: {
      id: 10,
      appName: "appIntegrated10",
      status: "Pending"
    }

我试图将我的结构分成两半，并显示前五个结果。我有一个上一个/下一个按钮，当我点击下一步时，它应该显示接下来的5个结果（在这种情况下是最后的5个）。然而，为了使一切工作，我需要能够分割我的对象，到目前为止，我所研究的每个方法都涉及数组和需要一些黑客攻击的对象。我想知道我是否遗漏了某些东西，或者我必须创建一个可以使用的解决方案？

Answer 1

纯JavaScript：

function getEntries(from, to) {
    var entries = [];
    for(var key in myJSONObj) {
        // extract index after `app`
        // var index = key.substring(3);
        // Better way : extract index using regular expression, so it will match `something1`, `foo2`, `dummy3`
        var index = parseInt(key.replace( /^\D+/g, ''));

        if(index >= from && index <= to) {
            entries.push(myJSONObj[key]);
        }
    }
    return entries;
}

console.log(getEntries(0, 5));

Answer 2

尝试_.chunk

https://lodash.com/docs/4.17.4#chunk

$scope.pages = _.chunk($scope.myJSONObj,5);

$scope.getPage = function( pageIndex ){
return $scope.pages[pageIndex];
}

Answer 3

这是未经测试的 - 但我在vanilla JS中为你编写了一个chunk方法，因为你不能使用lodash。

    function chunk(obj, chunkSize) {
        var resultArray = [];
        var resultArrayCurrentIndex = 0;
        for (var key in obj) {

            var item = obj[key];
            if (resultArray[resultArrayCurrentIndex].length <= chunkSize) {
                if (!resultArray[resultArrayCurrentIndex]) {
                    resultArray[resultArrayCurrentIndex] = [item];
                } else {
                    resultArray[resultArrayCurrentIndex].push(item)
                }
            } else {
                resultArrayCurrentIndex++
                resultArray[resultArrayCurrentIndex] = [item];
            }
        }

        return resultArray;

    }

然后你可以像这样访问它：

$scope.pages = chunk(yourObject, 5);
$scope.getPage = function(index){
return $scope.pages[index];
}

编辑 - 将其更改为接受对象。

Answer 4

使用Object.keys，Array.prototype.slice和Array.prototype.reduce来解决您的问题。希望这有帮助

angular.module('app',[])
.controller('TestCtrl', function($scope){
$scope.myJSONObj = {"app1":{"id":1,"appName":"appIntegrated1","status":"Pending"},"app2":{"id":2,"appName":"appIntegrated2","status":"Pending"},"app3":{"id":3,"appName":"appIntegrated3","status":"Completed"},"app4":{"id":4,"appName":"appIntegrated4","status":"Pending"},"app5":{"id":5,"appName":"appIntegrated5","status":"Pending"},"app6":{"id":6,"appName":"appIntegrated6","status":"Pending"},"app7":{"id":7,"appName":"appIntegrated7","status":"Pending"},"app8":{"id":8,"appName":"appIntegrated8","status":"Pending"},"app9":{"id":9,"appName":"appIntegrated9","status":"Pending"},"app10":{"id":10,"appName":"appIntegrated10","status":"Pending"}};

$scope.currentPage = 0;
$scope.pageSize = 5;
$scope.totalPage = Math.ceil( Object.keys($scope.myJSONObj).length/$scope.pageSize);
//pageNumber starts from 0 here
$scope.goToPage = function(pageNumber) {
  pageNumber = pageNumber>=0?pageNumber:0;
  var from = pageNumber*$scope.pageSize;
  var to = from + $scope.pageSize;
  return Object.keys($scope.myJSONObj).slice(from,to).reduce(function(a,b){
    a[b] = $scope.myJSONObj[b];
    return a;
  },{});
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="TestCtrl">
<button ng-disabled="currentPage===0" ng-click="currentPage = currentPage - 1">prev</button>
<button ng-disabled="currentPage===totalPage-1" ng-click="currentPage = currentPage + 1">next</button>
<b>Page: {{currentPage+1}}/{{totalPage}}</b>
<pre>{{goToPage(currentPage) | json}}</pre>
</div>

如何在angularJS中拆分我的JSON对象

4 个答案: