angularJSでJSONオブジェクトを分割する方法

Question

私のDBからオブジェクトとして返されたオブジェクトをリストするテーブルのページングを作成しようとしています。データ構造は次のようになります。

$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つの結果（この場合は最後の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

するTry _.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

それは未検証だ - しかし、あなたがすることができるので、私はバニラJSであなたのためのチャンクの方法を書きましたロダッシュを使用しないでください。 - OBJを受け入れるように、それを変更し

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

EDIT：

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; 

    } 

次に、あなたがこのようにアクセスすることができます。

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>