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

score 1 · Answer 1 · answered Jan 06 '17 at 15:50

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>

sfeast · Answer 2 · 2016-10-25T19:27:14.983

0

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

edited Oct 25 '16 at 19:27

answered Oct 23 '16 at 19:18

sfeast

956
5
7

I tried adding in the code, I have edited the above to reflect the changes but I am getting nothing to the DOM – Bill Oct 24 '16 at 06:18
When I console.log this.allUsers I get the object so I know I'm getting data from firebase – Bill Oct 24 '16 at 07:29
Does the new function get called? It should be returning an array of the users. – sfeast Oct 24 '16 at 19:41

score 0 · Answer 3 · answered Nov 12 '16 at 15:43

0

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.

answered Nov 12 '16 at 15:43

VincentTellier

558
6
16

score 0 · Answer 4 · edited May 23 '17 at 12:25

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.

score 0 · Answer 5 · answered Jan 07 '17 at 03:39

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>

Polymerfire dom-repeat with Firebase objects

5 Answers5

Linked