1

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>.

https://github.com/vaadin/expense-manager-demo/blob/master/src/overview-page.html 
<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.log

firebase.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
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
  • 1
    Can you show what your actual data in the database looks like? Are you storing things with numeric keys? `firebase-query` is designed to work with string-keyed object data. – Michael Bleigh Jul 22 '16 at 20:20
  • @MichaelBleigh: Yes. Your instincts were correct. I do not have keys on the stored data. *See above edits reflecting structure of stored data.* How can I populate my grid then? If I need to go back and store the data with keys, let me know. It sounds like that might be best from a data structure perspective to do this? – Let Me Tink About It Jul 22 '16 at 20:36
  • 1
    It looks like you probably want `firebase-document` which will just load the entire document at the path. I'd also strongly encourage structuring your data with e.g. `/users/my-userid-123` instead of putting the users directly at the root level. Then you could just do `` or to get all users `` – Michael Bleigh Jul 22 '16 at 20:39

1 Answers1

2

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.

Thennarasan
  • 698
  • 6
  • 11