Array from Firbease interpreted as Object in Polymer with dom-repeat

Question

I am using dom-repeat in Polymer for repeating an Array loaded from Firebase and I cannot figure out, why I get the "expected array for items, found Object" error as shown in the screenshot below. Here is the code I am using:

    <data-firebase data="{{cardsetList}}" requested-location="card-sets"  user="{{user}}"></data-firebase>

    <template is="dom-repeat" items="[[cardsetList]]">
        <paper-card image="../images/trip.png" alt="Donuts" class="amber" >
          <div class="card-content">Test {{index}}</div>
        </paper-card>
    </template>

Browser view & console

data-firebase is an element I have created that loads the data from FB, as you can see in the console with success (the array of 2 objects is what I want to load

Empty array before loading I checked if there is some not array data in the object I have before loading, but as you can also see in the console it is just an empty array. If I stop loading data from Firebase, there is also no error

Meaningful array in Firebase I also checked the data in FB, it is represented as a JSON array (I can see that when I export the data, the data is exported in the array brackets [])

Problem: Data gets loaded but the error persists How can it be that the dom repeat takes place (as you can see it is rendered) and also in the console there is an Array, but I am getting this error still?

Thanks a lot!

Kind regards, Tim

Answer 1

My understanding is that there is no support for arrays in firebase and that arrays get stored as "object" with integers as the key names.

// we send this
['hello', 'world']
// Firebase stores this
{0: 'hello', 1: 'world'} 

See here:

https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html

That looks to be just what you are getting back.

Answer 2

I figured it out. In the beginning the user doesn't seem to provided fast enough by the fb-auth. So as the user is empty, firebase tries to load data from a location that doesn't exist and thus is creating an object.

I added the following calculated binding:

Function

     hasContent: function(checkLength) {
         return checkLength.length > 0 ? checkLength : [];
     }

And in HTML

<template is="dom-repeat" items="[[hasContent(cardsetList)]]" as="cardItemLoop">
    ...
</template>

But propably I will have to think how I prevent that the queries/data-binding is made without having the user provided yet.

Also this seems to refer to firebase-document defaults to {} before resolving #33

Answer 3

If it's not late , to prevent the query , remove your path and later on when you have your auth object set your path in js. So your query won't have a path and then later in your tag and within the success callback of your auth, you set the path like below.

  signInFb: function() {
    this.$.auth.signInWithRedirect().then(function(response) {
      this.$.yourQueryElementID.path = "your path here" ; 
    }.bind(this)).catch(function(error) {

    }.bind(this));
  },