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" : "bob@gmail.com",
                "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?

Answer 1

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" : "bob@gmail.com",
         "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.