Firebase-Polymer: Accessing a sub Object/Array from the data variable

Question

I have a firebase Login in my Polymer App and then im getting the data from the users directory and store it as data. In data I have serveral sub directories ("books", "contacts", etc.), in books and contacts I have serveral Items/Objects (serveral books/contacts):

{ 
"users" : {   
    "google:117487344423952031114" : {
        "books" : {
            "kjsdkk" : {
                "author" : "Edward",
                "id" : 11,
                "language" : "English",
                "original" : "Shakeout"
            },
            sdlsjdksjhdkjh" : {
                "author" : "Olaf",
                "id" : 11,
                "language" : "Deutsch",
                "original" : "BlaBlaBla"
            },
            "x,kshdkjha" : {
                "author" : "Don",
                "id" : 10,
                "language" : "Latin",
                "original" : "Carpe diem"
            }
        },
        "contacts" : {
            "sadjköljds" : {
                "email" : "[email protected]",
                "name" : "Bob",
                "phone" : "+01 34566646467456"
            },
            "xölmödlkdcls" : {
                "address" : "First Street, 2",
                "name" : "Robert",
                "phone" : "+49 646415664"
            }
        }
    }
}

In my Web App I have 2 sections (books and contacts) and I want to loop over all books/contacts with some kind of this:

<template is="dom-repeat" items="{{data.books}} as="book">
    <tr on-tap="_openBookDialog">
              <td>{{book.id}}</td>
              <td>{{book.author}}</td>
              <td>{{book.original}}</td>
              <td>{{book.language}}</td>
              <td>{{book.status}}</td>
    </tr>
</template>

But when I call items="{{data.books}}" my books doesn't get displayed on my screen, only when I put my books directly under the data "node" with unique id's the books get displayed, how can I access books from the data Array/Objects?

David East · Accepted Answer · 2015-10-04 12:08:48Z

2

You're using a nested data structure. This will result in Firebase having to load everything underneath user/$uid.

Try refactoring your data structure to something more flat.

{
  "users": {
    "google:117487344423952031114": {
       "name": "some name"
     }
  },
  "usersBooks": {
     "google:117487344423952031114": {
       "kjsdkk": {
         "author": "Edward",
         "id": 11,
         "language": "English"
       }
     }
  },
  "userContacts": {
     "google:117487344423952031114": {
       "sadjköljds" : {
         "email" : "[email protected]",
         "name" : "Bob",
         "phone" : "+01 34566646467456"
       }
     }
  }
}

Now you'll just have to loop through /userBooks/$uid/$bookid to get the books for that user. The same works for contacts as well.

This structure is flat. You can retrieve nodes independently without loading unneeded data.

In case you don't know the $key represents the key. It can also represent the wildcard used in Security Rules.

edited Oct 4, 2015 at 12:08

answered Oct 2, 2015 at 11:38

David East

32.7k6 gold badges70 silver badges83 bronze badges

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

1 Comment

Ichor de Dionysos Over a year ago

Thanks, it's much better the way you decided it!!

Collectives™ on Stack Overflow

Firebase-Polymer: Accessing a sub Object/Array from the data variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related