Polymerfire dom-repeat with Firebase objects - firebase

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>