Firebase：レコードスコープのスコープの配列

Question

私はリストを作成するために作成し、それらをFirebase（$ FirebaseArray）に保存するAngularJSアプリを持っています。プロパティがcompleted: trueである項目オブジェクトとプロパティがcompleted: falseである項目との間のコントラストを示すグラフを表示したいと思います。そのためには、アイテムの種類ごとに2つの異なる配列を作成する必要があります。

これらの配列の結果はconsole.logになりますが、これらの配列を$ scope経由でDOMに表示するのが難しく、Angular-ChartJSスクリプトに入力するのがはるかに難しいです。

{ 
    "items": { 
    "KUnjnUG90g4Ms_pkbC5": { 
     text: "I need to do my hw", 
     dueDate: 1477647527093, 
     hoursToFinish: 1, 
     minutesToFinish: 5, 
     importance: "job depends on it", 
     completed: true, 
     pastDue: true, 
     urgent: true, 
     rank: 4089044218, 
     created_at: 1477263177719 
    }, 
    "KUq51IiPh4RgaC_v0Rg": { 
     text: "asdf", 
     dueDate: 1477647527093, 
     hoursToFinish: 1 
     minutesToFinish: 5 
     importance: "pretty important" 
     completed: false, 
     pastDue: true 
     urgent: true 
     rank: 3792736666 
     created_at: 1477302560019 
    } 
    } 
} 

工場質問にコントローラのrefを処理します：ここで

listo.factory("ItemCrud", ["$firebaseArray", 
    function($firebaseArray) { 

    var ref = new Firebase("database"); 
    var items = $firebaseArray(ref); 
    ... 

    return { 
     getAllItems: function() { 
     return items; 
     } 
    } 
    ... 
    } 
]); 

は、問題のクエリ（$scope.updateArrays）とコントローラである：ここでは

は私Firebaseは、次のようになります

listo.controller('UserCtrl', ["$scope", "ItemCrud", "$rootScope", "$interval", "$log", "$http", "$locale", "$templateCache", '$timeout', 
    function($scope, ItemCrud, $rootScope, $interval, $log, $http, $locale, $templateCache, $timeout) { 

    $scope.items = ItemCrud.getAllItems(); 

    $scope.completeItems = []; 
    $scope.incompleteItems = []; 

    $scope.updateArrays = function() { 
    var items = ItemCrud.getAllItems(); 
    items.$loaded().then(function(items) { 

     items.$ref().orderByChild("q_completed").equalTo(true).on("value", function(snapshot) { 
     console.log("updateArrays called"); 

     var completeItems = []; 
     completeItems = Object.keys(snapshot.val()); 

     if (snapshot.exists()) { 
      console.log("found", completeItems); 
      return completeItems; 
     } else { 
      console.warn("completeItems was not found."); 
      return []; 
     } 

     }); 

     items.$ref().orderByChild("q_completed").equalTo(false).on("value", function(snapshot) { 

     var incompleteItems = []; 
     incompleteItems = Object.keys(snapshot.val()); 

     if (snapshot.exists()) { 
      console.log("found", incompleteItems); 
      return incompleteItems; 
     } else { 
      console.warn("incompleteItems was not found."); 
      return []; 
     } 

     }); 

     return { 
     incompleteItems: incompleteItems, 
     totalIncompleteItems: incompleteItems.length, 
     completeItems: completeItems, 
     totalCompleteItems: completeItems.length 
     } 

    }); 
    }; 

} 
]); 

私のDOM上に$scope.updateArrays().totalIncompleteItemsと$scope.updateArrays().totalCompleteItemsを表示するために私は引き受ける必要がありますか？

私は、ディスプレイに以下得ることができるか、である：私のアプリでは、今のよう

<section ng-controller="UserCtrl" class="user"> 
    {{$scope.updateArrays().totalIncompleteItems}} and {{$scope.updateArrays().totalCompleteItems}} 
</section> 

これらは表示されません。しかし、$scope.updateArrays()内部console.log sが私のコンソールに次のようにログインします。

updateArrays called 
UserCtrl.js:495 found completeItems array ["-KUnjnUG90g4Ms_pkbC5", "-KUq51IiPh4RgaC_v0Rg", "-KUq6pXzElRP9JQC6AJB", "-KUq7WvMzH4FNaLdGL90"] 
UserCtrl.js:510 found incompleteItems array ["-KVMv-hKRzk-WXv-KrOv", "-KVMv1nIC26elEBX7QA-", "-KVMv3qAtVNTW0j7sU8K", "-KVMv5smhYTeaDFGYmoh"]] 

Firebaseクエリの深い知識を持つ誰かが解決策のplunkerを投稿することができれば、私は非常に感謝されます。

Answer 1

値の代わりにキーを取得しています。

次のコードこれに

var completeItems = []; 
completeItems = Object.keys(snapshot.val()); 

if (snapshot.exists()) { 
    console.log("found", completeItems); 
    return completeItems; 
} else { 
    console.warn("completeItems was not found."); 
    return []; 
} 

を変更します。

snapshot.forEach(function(childSnapshot) { 
    completeItems.push(childSnapshot.val()); 
}); 

console.log("found", completeItems); 

補間内部大きい非同期関数を呼び出すことが賢明ではない不完全なアイテム