简体   繁体   English

使用AngularJS在Firebase中显示关系数据

[英]Display relational data in Firebase using AngularJS

I want to display content using a flat relational data structure (similar to that of Firefeed). 我想使用扁平的关系数据结构(类似于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: JSON如下所示:

{
  "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? 问题是:只有ID参考时,如何显示上传的实际内容? 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). 我需要引用用户的ID(userFeedRef),并引用那些特定ID的实际内容,而不是所有上载(uploadsRef)。

How can I display this user ng-repeat in my html? 如何在html中显示此用户ng-repeat? So for example: ng-repeat {{feed.reasonUpload}} for user1 has to show: Test Test2 因此,例如:user1的ng-repeat {{feed.reasonUpload}}必须显示: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 编辑我看了这个例子,但我不知道如何在我的情况下在实际的HTML提要上呈现内容

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

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. 希望这个pl客能为您提供帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM