CODEWITHSUNDEEP
javascriptfirebasepolymer
Mikebarson
Mikebarson

Reputation: 622

Polymer 2.0 Data-Binding Array

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.

enter image description here

Upvotes: 0

Views: 298

Answers (1)

mishu
mishu

Reputation: 5397

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.

Upvotes: 1

Related Questions