I am trying to use the polymerfire/firebase-query
to load my data stored in Firebase using the Vaadin Expense Manager Demo. Specifically, I am trying to replace the <vaadin-pouchdb>
element with a combination of <firebase-query>
and </app-indexeddb-mirror>
.
<firebase-query
id="query"
log
app-name="my-firebase"
path="[[user.uid]]"
data="{{expenses}}">
</firebase-query>
When I try to load the page, I expect to see my grid populate with test data; but instead, I get the following errors.
console.logfirebase.js:284 Uncaught TypeError: Cannot create property '$key' on string 'foo'
firebase.js:284 Uncaught TypeError: Cannot create property '$key' on string 'new'
firebase.js:284 Uncaught TypeError: Cannot create property '$key' on number '123'
The value of {{expenses}}
I expect to be delivered to the app via <firebase-query>
is the following:
expenses = [
{
total : 123 ,
status : 'new' ,
merchant : 'foo' ,
},
]
What could be creating this error? Why is there a property '$key'
, trying to be created? Oh, wait. Could it be because there is no key associated with the expenses as they are stored in my Firebase?
Edit:
Here is what the data looks like in Firebase:
my-firebase
│
└──my-userid-abc-123
├── merchant: "foo"
├── status: "new"
└── total: 123
Using <firebase-query>
on locations where all of the children have primitive (boolean, string, number)
values is not supported. Please consider nesting these values in objects.