Search code examples
polymerfirebase-polymer

How to loop through nested Firebase keys in Polymer


So, I have a Polymer project that is saving to Firebase. My data looks like this:

enter image description here

What I'm trying to do is loop through the teams property in the data. Considering Polymer only loops through Arrays right now, this is proving to be pretty challenging (since Firebase preferably returns data as objects). So far, I can loop through the keys and get the teams, but can't get into the teams to loop through it. Here is my code:

<template repeat="{{key in keys}}">
   <div class="tile">
       <paper-shadow z="2" class="card" animated>
           <div id="header" class="header"></div>

            <div class="content">
              <p>{{data[key]}}</p>
              <span>{{team.club}}</span>
            </div>

            <footer horizontal layout>
              <paper-button id="teamview" on-tap="{{viewTeam}}" flex>VIEW</paper-button>
              <span flex></span>
              <paper-button id="teamDelete" on-tap="{{deleteTeam}}">DELETE</paper-button>
              <paper-button id="teamEdit" on-tap="{{editTeam}}">EDIT</paper-button>
            </footer>
        </paper-shadow>
     </div>
 </template>

I feel like I've tried almost every scenerio. Every time I try and loop one more level with repeat="{{team in key}}" it breaks. Seeing if maybe some one else has a better perspective on this? Thanks in advance!


Solution

  • So, the way I found out needs more in-depth explaining regarding Polymer and Firebase. First off, when you enter your location attribute in the firebase-element, whenever you are sourcing your data and keys, it is specifically with that location - not your data as a whole.

    Therefore, the problem I was having was rooted in my location attribute. Once I changed my location to specify the exact nested level I wanted to push and source data from - all was well. The end code looked like this:

    <firebase-element id="fbase" 
       location="https://volleyball-app.firebaseio.com/{{user.uid}}/userTeams" 
       data="{{userTeams}}" keys="{{keys}}" dataReady="{{userReady}}">
    </firebase-element>
    
    <template repeat="{{key in keys}}">
      <div class="content">
        <p>{{userTeams[key]['team']}}</p>
        <span>{{userTeams[key]['club']}}</span>
      </div>
    </template>
    

    What this is doing is repeating through all the keys in the <firebase-element id="fbase" location="https://volleyball-app.firebaseio.com/{{user.uid}}/userTeams location (nothing more). From there I'm grabbing the team property in each key.