Firebase：记录子项查询的$范围数组

Question

我有一个 AngularJS 应用程序，它创建待办事项列表并将它们保存到 Firebase ($FirebaseArray)。我想显示一个图表，显示属性显示completed: true 的项目对象和属性显示completed: false 的对象之间的对比。为此，我必须为每种项目创建两个不同的数组。

我可以设法console.log 这些数组的结果，但是我很难通过 $scope 在 DOM 中显示这些数组，更不用说将它们输入到 Angular-ChartJS 脚本中了。

这是我的 Firebase 的样子：

{
  "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)：

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
      }

    });
  };

 }
]);

简单地问我的问题：为了将$scope.updateArrays().totalIncompleteItems 和$scope.updateArrays().totalCompleteItems 显示到我的DOM 上，我必须进行哪些编码？

也就是说，我怎样才能得到下面的显示：

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

到目前为止，在我的应用程序中这些不显示。但是，$scope.updateArrays() 中的 console.logs 将以下内容记录到我的控制台中：

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);

对不完整的项目做同样的事情