Firebase:记录子查询的$scoping数组

Question

我有一个AngularJS应用程序创建待办事项列表，并将它们保存到Firebase ($FirebaseArray)上。我想要显示一个图表，显示属性显示为completed: true的item对象和属性显示为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
      }

    });
  };

 }
]);

简单地问一下我的问题:为了在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将以下内容登录到我的控制台：

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查询有深入的了解，我将非常感激。

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

对未完成的项目执行相同的操作