Display relational data in Firebase using AngularJS

Question

I want to display content using a flat relational data structure (similar to that of Firefeed). Everything is working the way it should, except I can't figure out how to display the actual content. I'm struggling for a while now and I think I'm almost there actually, but something is still missing.

I have two references:

var userFeedRef = new Firebase(FIREBASE_URL).child("users").child($rootScope.currentUser.$id).child("feed");
var uploadsRef = new Firebase(FIREBASE_URL).child("uploads");

The JSON looks like this:

{
  "uploads" : {
    "-KGkxzQj0FM2CMAXo5Em" : {
      "author" : "87a8b6c8-7f72-45c2-a8c5-bb93fe9d320d",
      "date" : 1462184179564,
      "name" : "Zizazorro",
      "reasonUpload" : "Test",
      "startSec" : 80,
      "uploadTitle" : "Kid Ink - Promise (Audio) ft. Fetty Wap"
    },
    "-KGlCoD7kEa1k3DaAtlG" : {
      "author" : "87a8b6c8-7f72-45c2-a8c5-bb93fe9d320d",
      "date" : 1462188328130,
      "name" : "Zizazorro",
      "reasonUpload" : "Test2",
      "startSec" : 80,
      "uploadTitle" : "Kid Ink - Show Me ft. Chris Brown"
    }
  },
  "users" : {  
    "87a8b6c8-7f72-45c2-a8c5-bb93fe9d320d" : {
      "date" : 1459369248532,
      "feed" : {
        "-KGkxzQj0FM2CMAXo5Em" : true,
        "-KGlCoD7kEa1k3DaAtlG" : true
      },
      "firstname" : "Bob",
      "followers" : {
        "e3de536b-03a1-4fb4-b637-ebcebaae55c6" : true
      },
      "following" : {
        "e3de536b-03a1-4fb4-b637-ebcebaae55c6" : true
      },
      "regUser" : "87a8b6c8-7f72-45c2-a8c5-bb93fe9d320d",
      "uploads" : {
        "-KGkxzQj0FM2CMAXo5Em" : true,
        "-KGlCoD7kEa1k3DaAtlG" : true
      },
      "username" : "Zizazorro"
    },
    "e3de536b-03a1-4fb4-b637-ebcebaae55c6" : {
      "date" : 1459369285026,
      "feed" : {
        "-KGkxzQj0FM2CMAXo5Em" : true,
        "-KGlCoD7kEa1k3DaAtlG" : true
      },
      "firstname" : "Anna",
      "followers" : {
        "87a8b6c8-7f72-45c2-a8c5-bb93fe9d320d" : true
      },
      "following" : {
        "87a8b6c8-7f72-45c2-a8c5-bb93fe9d320d" : true
      },
      "regUser" : "e3de536b-03a1-4fb4-b637-ebcebaae55c6",
      "username" : "Sven8k"
    }
  }
}

The problem is: How can I display the actual content of the upload, when there is only a ID reference? I need a reference to the IDs for a user (userFeedRef) and a reference to the actual content of those specific IDs, not all uploads (uploadsRef).

How can I display this user ng-repeat in my html? So for example: ng-repeat {{feed.reasonUpload}} for user1 has to show: Test Test2

EDIT I've looked at this example, but I can't figure out how to render the content on the actual html feed in my case

var commentsRef =
  new Firebase("https://awesome.firebaseio-demo.com/comments");
 var linkRef =
  new Firebase("https://awesome.firebaseio-demo.com/links");
var linkCommentsRef = linkRef.child(LINK_ID).child("comments");
linkCommentsRef.on("child_added", function(snap) {
  commentsRef.child(snap.key()).once("value", function() {
    // Render the comment on the link page.
  ));
});

See http://stackoverflow.com/questions/30299972/joining-data-between-paths-based-on-id-using-angularfire — Frank van Puffelen, May 03 '16 at 13:32
@FrankvanPuffelen I've seen that post before and I've tried it all again now, but do you recommend NormalizedCollection? I saw that it's still in beta and should not be used for real apps atm. I think it should be easier than the factory as well. It worked when instead of making it flat, I've send the entire upload to all followers, but I don't think that's a good solution regarding duplicate data. Such a pain in the ass haha — Zizazorro, May 03 '16 at 16:28
That answer has two approaches, one of them extends the AngularFire `$firebaseArray()`. That's closest to what you're trying. — Frank van Puffelen, May 03 '16 at 17:22

score 0 · Answer 1 · answered Sep 04 '17 at 05:24

0

You can do something like this:

$scope.finalData = (Object).values($scope.firebaseData.uploads);
//$scope.firebaseData is data what you retrieving from firebase.

Hope this plunker will help you.

answered Sep 04 '17 at 05:24

jesusverma

1,625
1
16
17

Display relational data in Firebase using AngularJS

1 Answers1