Polymerfire getting data for each element in a list

Question

Using a similar example to that on the polymerfire website, how can I get the information for each of the notes.

If I get a list of notes avaliable like:

<firebase-document
      path="/teams/[[teamid]]/notes"
      data="{{notes}}"
      >
    </firebase-document>

The result of that would be a object

f738hfno3oibr39rhr: true
adfagsg35ugho84hoh: true
... etc

What would be the accepted way to get data for each of these notes?

This is what I've got so far but its not working when things get removed or added.

<template is="dom-repeat" items="{{notesComputed}}">
                <div>
                    <!-- Get the data needed for this card -->
                    <firebase-document
                        path="/notes/[[item.noteid]]/meta"
                        data="{{item.meta}}"
                    ></firebase-document>

note that I've converted the notes object direct from firebase to an array so I can use the dom-repeat

Thanks any feedback is appreciated

Answer 1

Get Data:

Use firebase-query, this will return an array of items at the specified path.

<firebase-query
      path="/teams/[[teamid]]/notes"
      data="{{notes}}"
      >
</firebase-query>

• no need for extra conversion
• can be use in dom-repeat

Save Data

Use the firebase-document to save data to a certain location.

<firebase-document id="doc"></firebase-document>

then in the function where you want to add the data do the following

this.$.doc.path = null; //makes sure to not override any other data
this.$.doc.data = {}; //data that you want to save
this.$.doc.save('path'); //path in firebase where you want to save your data

Example file structure

,<dom-module id="el-name">
  <template>
    <styel></style>
    
    <firebase-document id="doc"></firebase-document>
    
    <firebase-query
      id = "query"
      path = "/users"
   data = "{{usersData}}">
    </firebase-query>
    
    <template id="dom-repeat" items="{{usersData}}" as="user">
      <div>[[user.name]]</div>
    </template>
    
    <paper-button on-tap="add"></paper-button>
  </template>
  
  <script>
    Polymer({
      is: 'el-name',
      
      properties: {},
      
      add: function() {
        this.$.doc.path = null;
        this.$.doc.data = {name: 'Some Name'};
        //save(path, key), by not giving a key firebase will generate one itself
        this.$.doc.save('/users');
      }
    });
  </script>
</dom-module>