CODEWITHSUNDEEP
javascriptarraysfirebasefirebase-realtime-databasepolymer
user3492268
user3492268

Reputation:

Polymer updating javascript array from firebase realtime database

I have a vaadin-grid and I want to show a list of data from firebase database. I know that based from the docs, this structure is ugly and I should create another subtree for this but and just want to make a proof of concept. So here is the code: 

ready() {
    var items = [];
    if (this.locationKey) {
      var territoryRef = firebase.database().ref('Territories').child(this.locationKey);
      var householdRef = firebase.database().ref('Households');
      var contactsRef = firebase.database().ref('Contacts');

      territoryRef.once('value').then((terrSnap) => {
        terrSnap.forEach((terrChildSnap) => {
          var territoryName = terrChildSnap.val().name;
          var territoryKey = terrChildSnap.key;

          householdRef.child(territoryKey).once('value').then((householdSnap) => {
            if (householdSnap.val()) {
              householdSnap.forEach((householdChildSnap) => {
                var household = householdChildSnap.val();
                var householdName = household.name;
                var householdKey = householdChildSnap.key;

                contactsRef.child(householdKey).once('value').then((contactsSnap) => {
                  if (contactsSnap.val()) {
                    contactsSnap.forEach((contactsChildSnap) => {
                      var contacts = contactsChildSnap.val();
                      var contactsName = contacts.name;
                      var contactsKey = contactsChildSnap.key;

                      items.push({ territory: territoryName, name: contactsName, household: householdName, nationality: contacts.nationality, language: contacts.language || "" });

                    })
                  }
                })
              })
            }
          })
        })
        this.items = items;
      }).catch((err) => {
        console.error(err)
      });

    }
  }

And I just put the items array in the grid

<vaadin-grid id="grid" aria-label="Contacts Summary" items="[[items]]">
  <vaadin-grid-column width="50px" flex-grow="0">
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>...

The grid loads fine but it doesn't show the data. I can confirm though that that this.items is populated. Though not being shown in the grid. Please let me know what I'm doing wrong. Thank you

Upvotes: 1

Views: 156

Answers (1)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

this.items just sets the value, but if you want it to actually notify the dom-repeat about a change (or any kind of polymer element) you must use this.set('items', items). This.set() sends out an event to all polymer elements, such as dom-repeat, that the variable has changed.

I'm not familiar with firebase.database() but if it updates automatically, then you need to use this.push('items', item) instead. The dom-repeat usually only updates if you change the length of the array used to populate the dom-repeat.

If you want to see updates of specific properties within already existing elements, then you need to use this.set() but make sure to remove any references to the original array (this.items), before replacing the changed element. I usually do it with var items = JSON.parse(JSON.stringify(this.items)); instead of just var items = this.items. Otherwise, Polymer will make a dirty check against the new updated array and find no values has updated (because items is a reference to this.items), and therefor not update the DOM.

Also, ready() should be ready: function()

Upvotes: 1

Related Questions