CODEWITHSUNDEEP
angularjsfirebasefirebase-realtime-databaseangularfire
snobbish llama
snobbish llama

Reputation: 11

Firebase: $scoping array of query of record children

I have an AngularJS app that creates to do lists and saves them onto Firebase ($FirebaseArray). I would like to display a chart that shows a contrast between those item objects whose properties show completed: true and those objects whose properties show completed: false. In order to do that, I have to create two different arrays for each kind of item.

I can manage to console.log the results of these arrays, but I am having difficulties displaying these arrays in the DOM via $scope, much less feeding them into the Angular-ChartJS scripts.

Here is what my Firebase looks like:

{
  "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
    }
  }
}

A factory handles the ref for the controller in question:

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

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

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

Here is the controller with the query in question ($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
      }

    });
  };

 }
]);

To ask my question simply: What coding would I have to undertake in order to display $scope.updateArrays().totalIncompleteItems and $scope.updateArrays().totalCompleteItems onto my DOM?

That is, how can I get the below to display:

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

As of now in my app these don't display. However, the console.logs inside $scope.updateArrays() log the following onto my console:

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"]]

I would be very grateful if someone with deep knowledge of Firebase querying could post a plunker of the solution.

Upvotes: 1

Views: 52

Answers (1)

Zura Sekhniashvili
Zura Sekhniashvili

Reputation: 1167

You are getting keys instead of values.

Modify the following code

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

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

into this.

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

console.log("found", completeItems);

Do the same for incomplete items

Upvotes: 0

Related Questions