1

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

Improve this question
2
  • Maybe you can override the dirty checking (that could be the problem) using the set method: this.set('items', items). Commented Jul 6, 2017 at 13:51
  • Thank you.. Yes, I was able to try a lot of what is written in the docs and the set part works but the problem is detecting a change has happened. I can confirm this by logging after the set statement. Commented Jul 6, 2017 at 15:41

1 Answer 1

Reset to default
1

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()

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.