How do I return specific list of items via AngularFire $asObject or $asArray

Question

I am trying to learn Firebase AngularFire, using the new methods $asObject or $asArray, along with a data structure recommended in the blog post Denormalizing Your Data is Normal .

Let's say I have data of Lists and Items, and I want to return all the Items contained on a specific List.

FIREBASE ROOT: has two locations: 1) lists, 2) items

    {
  "items" : {
    "itemid1" : {
      "isonlist" : {
        "listid3" : true
      },
      "itemname" : "itemA"
    },
    "itemid2" : {
      "isonlist" : {
        "listid3" : true
      },
      "itemname" : "itemB"
    },
    "itemid3" : {
      "itemname" : "itemC"
    },
    "itemid4" : {
      "itemname" : "itemD"
    }
  },
  "lists" : {
    "listid1" : {
      "listtitle" : "ListA"
    },
    "listid2" : {
      "listtitle" : "ListB"
    },
    "listid3" : {
      "listitems" : {
        "itemid1" : true,
        "itemid2" : true
      },
      "listtitle" : "ListC"
    },
    "listid4" : {
      "listtitle" : "ListD"
    }
  }
}

Here is my code:

<html ng-app="appListsOfItems">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.8.2/angularfire.min.js"></script>  
</head>

<body ng-controller="myCtrl">

<h1>Lists of Items</h1>
<b>Write out the title of this list: </b>
<div ng-model="list">{{list.listtitle}}</div>

<b>Write each of the itemids for this list - (isonlist):</b>
<div ng-repeat="(lid, li) in list.listitems">
{{lid}} | {{li}}
</div>

<b>Write the itemname for each of the items for this list:</b>
<div ng-repeat="(iid, i) in items">
{{iid}} | {{i.$id}} | {{i.itemname}}
</div>

<script>
    var app = angular.module("appListsOfItems", ["firebase"]);

    app.controller("myCtrl", 
        function($scope, $firebase) {

            // Create firebase reference to a specific list 'listid3'
            var listRef = new Firebase("https://xxxxx.firebaseio.com/lists/listid3");

            // Assign the firebase reference to an angularfire object using the new $asObject method
            var objList = $firebase(listRef).$asObject();
            //Bind the object to scope and give it a name using the new $bindTo method
            objList.$bindTo($scope, "list");
            console.log(objList);

            // Get the item name of each of the items on the list 'listid3'
            // !!! THIS IS NOT WHAT I WANT. THIS RETURNS ALL ITEMS.
            var refItems = new Firebase("https://xxxxx.firebaseio.com/items");
            var arrayItems = $firebase(refItems).$asArray();
            $scope.items = arrayItems;
            console.log(arrayItems);

        }
    );

</script>
</body>
</html>

This code renders:

Lists of Items

Write out the title of this list:

ListC

Write each of the itemids for this list - (isonlist):

itemid1 | true

itemid2 | true

Write the itemname for each of the items for this list:

0 | itemid1 | itemA

1 | itemid2 | itemB

2 | itemid3 | itemC

3 | itemid4 | itemD

===========================================

ISSUE: $scope.items = arrayItems returns ALL THE ITEMS in the "items" location.

QUESTION: How do write out the "itemname" for the items only contained on "listid3"

EXCEPTED RESULT (Write out the item name of each of the items on the list "listid3"):

0 | itemid1 | itemA

1 | itemid2 | itemB

Community · Accepted Answer · 2017-05-23 10:33:35Z

2

You are trying to JOIN two data locations: lists and items.

There is no built in support for such JOINs in Firebase, not is there an array that returns a subset in AngularFire.

You will have to write your own (using once for example to retrieve each item in a list) or use join from Kato's Firebase-util library: https://github.com/firebase/firebase-util/tree/master/src/join.

Also see "How to filter a synchronized array?", which covers the same topic.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Sep 4, 2014 at 0:02

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UncleKenta Over a year ago

Right: cant do JOINS. I was afraid my structure is wrong to begin with. I am really struggling with this. So hard to wrap my head around it after a lifetime of SQL thinking. I will get it eventually. Thanks for the help.

Collectives™ on Stack Overflow

How do I return specific list of items via AngularFire $asObject or $asArray

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related