AngularJS内のネストされたオブジェクトのカスタムorderBy

Question

私の配列内のすべてのオブジェクトをネストされたプロパティ、私の場合はvalidUntilフィールドで並べ替えることを試みています。私はちょうどこれを行う方法を理解できませんか？

私はオブジェクトをループするためにng-repeatでangleを使用しています。

私はSOで検索しましたが、このタイプのオブジェクト構造に対しては何の解決策も見つかりませんでした。これはカスタムフィルタで拡張するのがよいでしょう。

更新 すべての有効なUntilフィールドは、エポックタイムスタンプです。したがって、私の出力はvalidUntilフィールドの昇順または降順のようにする必要があります。これも可能ですか？私は私のチェックインとファンのオブジェクトを分割し、これを達成するための新しい配列を作成する必要があると思いますか？

[{ 
    "19852" : { 
    "checkins" : { 
     "-KJk_QqoIMQi_XT4V-e8" : { 
     "called" : false, 
     "createdAt" : 1465398937, 
     "daysBetween" : 22, 
     "new" : 2000, 
     "old" : 996, 
     "ratio" : 45.54545454545455, 
     "type" : "checkins", 
     "validUntil" : 1467324000 
     } 
    }, 
    "fans" : { 
     "-KLL5pZsdZu2lAbmIuED" : { 
     "called" : false, 
     "createdAt" : 1467102227, 
     "daysBetween" : 3, 
     "new" : 500, 
     "old" : 173, 
     "ratio" : 109, 
     "type" : "fans", 
     "validUntil" : 1467324000 
     }, 
     "-KLLqu_BT6cIVf-ALJMA" : { 
     "called" : false, 
     "createdAt" : 1467114826, 
     "daysBetween" : 2, 
     "new" : 600, 
     "old" : 174, 
     "ratio" : 213, 
     "type" : "fans", 
     "validUntil" : 1467324000 
     } 
    }, 
    "name" : "Test 1" 
    }, 
    "-KCGLvKjmF0dxe8QuAXh" : { 
    "checkins" : { 
     "-KLRVY9FAzHDPTIf1_qS" : { 
     "called" : false, 
     "createdAt" : 1467209626, 
     "daysBetween" : 32, 
     "new" : 4000, 
     "old" : 3699, 
     "ratio" : 6.9, 
     "type" : "checkins", 
     "validUntil" : 1470002400 
     } 
    }, 
    "name" : "Test 2" 
    }, 
    "-KKOX2JDkM84jrZcHHq4" : { 
    "fans" : { 
     "-KL253oeqDFedCRpDV4a" : { 
     "called" : false, 
     "createdAt" : 1466783256, 
     "daysBetween" : 6, 
     "new" : 10, 
     "old" : 1, 
     "ratio" : 1.5, 
     "type" : "fans", 
     "validUntil" : 1467324000 
     } 
    }, 
    "name" : "Test 3" 
    } 
}] 

Answer 1

AngularJsのOrderByでは、オブジェクトの順序付けができません。これを回避するには、オブジェクトを自分で配列に変換するか、新しいフィルタを作成して背後でこれを行うことができます。

ここでは、カスタムフィルタを使用してその方法を説明します。関数getMinValueは再帰的であり、循環参照を処理しないことに注意してください（循環し続けます）。問題が発生した場合は、特定のキーを再帰的に呼び出さないようにこの関数を変更するだけで済みます。ここで

はjavascriptのコードである：ここでは

angular.module("myApp", []).filter('orderObjectBy', function(orderByFilter) { 
    return function(items, sortPredicate, reverseOrder) { 
    var array= []; 
    angular.forEach(items, function(item) { 
     array.push(item); 
    }); 
    return orderByFilter(array, sortPredicate, reverseOrder); 
    }; 
}).controller('someController', function ($scope) { 
    $scope.order = function(obj){ 
     return getMinValue(obj); 
    }; 
    function getMinValue(obj){ 
     //this is a recursive call that will look through all of the objects to find the minimum validUntil. Be careful because circular references will loop forever. 
     //if you believe you might have circular references, then there are small changes you can make to account for that. It just didn't seem necessary for your code. 
     var minValidUntil = null; 
     angular.forEach(obj, function(item) { 
      var validUntil = item.validUntil; 
      if(validUntil == null && angular.isObject(item)){ 
       validUntil = getMinValue(item); 
      } 
      if(validUntil != null && (minValidUntil == null || validUntil < minValidUntil)){ 
       minValidUntil = validUntil; 
      } 
     }); 
     return minValidUntil; 
    } 
    $scope.data = { 
     "19852" : { 
     "checkins" : { 
      "-KJk_QqoIMQi_XT4V-e8" : { 
      "called" : false, 
      "createdAt" : 1465398937, 
      "daysBetween" : 22, 
      "new" : 2000, 
      "old" : 996, 
      "ratio" : 45.54545454545455, 
      "type" : "checkins", 
      "validUntil" : 1467324000 
      } 
     }, 
     "fans" : { 
      "-KLL5pZsdZu2lAbmIuED" : { 
      "called" : false, 
      "createdAt" : 1467102227, 
      "daysBetween" : 3, 
      "new" : 500, 
      "old" : 173, 
      "ratio" : 109, 
      "type" : "fans", 
      "validUntil" : 1467324000 
      }, 
      "-KLLqu_BT6cIVf-ALJMA" : { 
      "called" : false, 
      "createdAt" : 1467114826, 
      "daysBetween" : 2, 
      "new" : 600, 
      "old" : 174, 
      "ratio" : 213, 
      "type" : "fans", 
      "validUntil" : 1467324000 
      } 
     }, 
     "name" : "Test 1" 
     }, 
     "-KCGLvKjmF0dxe8QuAXh" : { 
     "checkins" : { 
      "-KLRVY9FAzHDPTIf1_qS" : { 
      "called" : false, 
      "createdAt" : 1467209626, 
      "daysBetween" : 32, 
      "new" : 4000, 
      "old" : 3699, 
      "ratio" : 6.9, 
      "type" : "checkins", 
      "validUntil" : 1470002400 
      } 
     }, 
     "name" : "Test 2" 
     }, 
     "-KKOX2JDkM84jrZcHHq4" : { 
     "fans" : { 
      "-KL253oeqDFedCRpDV4a" : { 
      "called" : false, 
      "createdAt" : 1466783256, 
      "daysBetween" : 6, 
      "new" : 10, 
      "old" : 1, 
      "ratio" : 1.5, 
      "type" : "fans", 
      "validUntil" : 1467324000 
      } 
     }, 
     "name" : "Test 3" 
     } 
    }; 
}); 

は、私がテストのために使用されるHTMLです：

<div ng-app="myApp" ng-controller="someController"> 
    <div ng-repeat='obj in data | orderObjectBy: order'> 
     <span>{{obj.name}}</span> 
     <div ng-repeat='checkin in obj.checkins'> 
      <span>checkin - {{checkin.validUntil}}</span> 
     </div> 
     <div ng-repeat='fan in obj.fans'> 
      <span>fan - {{fan.validUntil}}</span> 
     </div> 
     <br /><br /> 
    </div> 
</div>