Displaying data with polymerfire

0
votes

I'm new as a web dev, but I have been looking into Polymer with Firebase as a backend. I'm simply trying to display a list of objects from Firebase using a dom-repeat, but I'm completely lost. Any help would be much appreciated.

Firebase structure:

{
  "gardens" : {
    "-KM0F2K0Nvioskfy4Nn8" : {
      "height" : 1,
      "width"
      "name" : "Flower Pot",
    },
    "-KM0F8kOvf-_Z17V5Tne" : {
      "height" : 4,
      "name" : "Raised Bed 1",
      "waterValveState" : false,
      "width" : 1
    },
    "-KM0FCKUa9PyuJPVDozK" : {
      "height" : 5,
      "name" : "BigGarden",
      "waterValveState" : false,
      "width" : 2
    },
    "-KM0P-8azA059tGpwiBk" : {
      "height" : 3,
      "name" : "Strawberries",
      "waterValveState" : false,
      "width" : 1
    },
    "-KM0PsSKHiH1xR-q_CzN" : {
      "height" : 2,
      "name" : "Tomatoes",
      "waterValveState" : false,
      "width" : 1
    },
    "-KM0aHqq1UT1IEFvoyFx" : {
      "height" : 1,
      "name" : "Green Beans",
      "waterValveState" : false,
      "width" : 1
    }
  }
}

Polymer code:

<firebase-document
    app-name="garduino"
    path="/gardens"
    data="{{gardendata}}">
</firebase-document>

<div class="gardens">
    <template is="dom-repeat" items="{{gardendata}}" as="garden">
        <paper-card 
            heading="[[garden.name]]" 
            class="cyan">
        </paper-card>
    </template>
</div>

<script>
    Polymer({
        is: 'garduino-app',

        properties: {
            gardendata: {
                type: Object,
            }
        }
    });
</script>
1
firebasepolymerfirebase-realtime-databasepolymer-1.0polymerfire
You should use a firebase-query element rather than a firebase-document element for the data to be "converted" into an array – Alan Dávalos

1 Answers

1
votes

I think a firebase query is most suitable for that instead of the firebase document as illustrated below:

<firebase-query
    id="query"
    app-name="garduino"
    path="/gardens"
    data="{{gardendata}}">
</firebase-query>

You can then do your dom-repeat like you had done:

<template is="dom-repeat" items="{{gardendata}}" as="garden">
    <paper-card 
        heading="[[garden.name]]" 
        class="cyan">
    </paper-card>
</template>

I hope this helps