Polymerfire dom-repeat with Firebase objects

Question

I want to be able to show a list of all the FirstName and ZipCodes. My data looks as follows:

/user
|
|__INAxzxWKQrSAfA7tapV0c08YvfJ3
|   |____FirstName:"James"
|   |____ZipCode:"90210"
|
|__ANAczxWKQrEAfA7tapV0c08YvfX6
    |____FirstName:"Simon"
    |____ZipCode:"40213"

and Polymerfire's firebase document looks like this

<firebase-document
    app-name="contacts"
    path="/user"
    data="{{allUsers}}">
</firebase-document>

And my dom repeat is like

<template is="dom-repeat" items="{{_makeArray(allUsers)}}">
    <div class="profile card">
        {{item.FirstName}} 
    </div>
</template>

I added the function

_makeArray: function(items) {
  return Object.keys(items).map(function (key) {items[key]});
}

There are no errors but I also get nothing to the DOM

Answer 1

just use firebase-query instead of firebase-document. you'll get an array back.

<firebase-query
  app-name="contacts"
  path="/user"
  data="{{allUsers}}">
</firebase-query>

<template is="dom-repeat" items="{{allUsers)}}">
  <div class="profile card">
    {{item.FirstName}} 
  </div>
</template>

Answer 2

dom-repeat takes an array as the items property. You can do something like this:

<template is="dom-repeat" items="[[makeArray(allUsers)]]">

...

makeArray: function(items) {
  return Object.keys(items).map(function (key) {items[key]});
}

Answer 3

You forgot the return:

_makeArray: function(items) {
  return Object.keys(items).map(function (key) { return items[key]; });
}

Its works fine with me data are displayed just fine.

Answer 4

Better implementation (also includes the name of the key if required) can be found here:

How to use dom-repeat with objects instead of arrays in Polymer 1.0?

Also an implementation for two way binding:

Two way binding for Firebase arrays in dom-repeat

Hope this gets implemented in Polymer 2.0, as Firebase is being advertised but then there are problems with using best practice Polymer and best practice Firebase together.

Answer 5

Use firebase-query to return an array of object that you can pass to dom-repeate.

  <firebase-query
   path="/user"
   data="{{allUsers}}"
   </firebase-query>

The dom-repeat

add attribute as="data"
add property data.$key

<template is="dom-repeat" items="{{_makeArray(allUsers)}}" as="data">
    <div class="profile card">
        {{data.$key}} 
        {{data.FirstName}} 
    </div>
</template>