Polymer 2.0 Data-Binding Array

Question

I'm trying to show the list of all the candidates under their corresponding parties I have stored in my Firebase database. I am using Polymer 2.0 Starter-Kit.

Here's the code:

_checkParties() {
      var candidate_list = []
      firebase.database().ref("/candidates/"+this.party.$key).once("value", function(snapshot) {
          snapshot.forEach(function(snap) {
              var data = {"key": snap.key, "data": snap.val()}

              var results = Object.keys(data["data"]).map(function(key) {
                return {
                    name: key,
                    value: data["data"][key],
                    key: data["key"]
                };
              })
              candidate_list.push(results[0])
          })
      })
      this.candidates = candidate_list;
  }

Basically I'm querying from my firebase the children of that path, then appended them to my var candidate_list . Outside the query I then set my this.candidates to the array var candidate_list .

Here's the code to my template:

<template is="dom-repeat" items="{{ candidates }}" as="candidate">
      <div class="card">
          <p>[[candidates]]</p>
          <h3>[[candidate.name]] - [[candidate.value]]</h3>
          <paper-button raised style="color: yellow; background-color: black;" on-tap="_castVote">Vote</paper-button>
      </div>
  </template>

The code to my static properties:

candidates: {
            type: Array,
            value: []
          }

Then my constructor:

constructor() {
    super();
  }

I tried adding this to my constructor but it doesn't seem to affect anything:

constructor() {
    super();
    this.candidates = [];
  }

The result should be that the cards in my template dom-repeat show all the candidates. Instead I'm getting nothing is being shown. But when I console.log I could see all my candidates.

Answer 1

I am not sure where your _checkParties is being called, but it sounds like Polymer isn't aware that you updated the candidates array .

I think that the first attempt could be to use the set method, to be sure it's notified of the update, as described here . So that would mean to replace your last statement in the method. Instead of

this.candidates = candidate_list;

you would have

this.set('candidates', candidate_list);

Another option, that seems to be very well suited for what you're doing would be to have the candidates list as a computed property. So you would just add to your property definition the 'computed' key:

candidates: {
    type: Array,
    value: [],
    computed: '_checkParties(candidatesResponse)',
}

and in your method you would have to return the list, instead of overwritting the property, so

return candidate_list;

instead of the same line mentioned above.