1

I´m currently starting with Polymerfire and trying to do a small application to list some data stored on Firebase as a paper-card. I have used some of the code from the google labs example to build up the application so its stands as follow:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <title>Beer Cellar</title>
      <link rel="manifest" href="manifest.json">      
    <style>
      body {
        margin: 0;
      }
    </style>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="import" href="beer-list-app.html">      
  </head>
  <body>   
      <firebase-app
    name="BeerCellar"
    api-key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    auth-domain="beercellar-627fc.firebaseapp.com"
    database-url="https://beercellar-627fc.firebaseio.com">
</firebase-app>
<beer-list-app></beer-list-app>
  </body>
</html>

beer-list-app.html

<link rel="import" href="bower_components/polymerfire/polymerfire.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">
<dom-module id="beer-list-app">
    <template>
    <firebase-query
        id="query"
        log
        app-name="BeerCellar"
        path="/brands"
        data="{{branddata}}">
    </firebase-query>

    <template is="dom-repeat" items="[[branddata]]" as="brand">

        <paper-card heading="[[brand.name]]">
      <div class="card-content">[[brand.origin]]</div>
    </paper-card>
    </template>
</template>
    <script>
    Polymer({
      is: 'beer-list-app',
        properties: {
        uid: String,
        branddata: {
          type: Object,
          observer: 'dataChanged'
        }
      },

      dataChanged: function (newData, oldData) {
        // do something when the query returns values
          console.log("NewData: " + newData);
      }
    });
    </script>
</dom-module>

However it appears that is not working and not showing anything. I´ve added the log property to the firebase-query and got the following on the console:

Initializing stored value.
polymer-micro.html:673 Polymer::Attributes: couldn`t decode Array as JSON
app-storage-behavior.html:350 Got stored value! undefined {{branddata}}

I´ve tried changing items on template to [[branddata]] with the same result.

The code of polymer-micro.html in which the error is throwing:

deserialize: function (value, type) {
switch (type) {
case Number:
value = Number(value);
break;
case Boolean:
value = value != null;
break;
case Object:
try {
value = JSON.parse(value);
} catch (x) {
}
break;
case Array:
try {
value = JSON.parse(value);
} catch (x) {
value = null;
console.warn('Polymer::Attributes: couldn`t decode Array as JSON');
}
break;

According to Chrome dev tools the variable value for JSON.parse contains {{branddata}} or [[branddata]] depending on how I´ve defined it on the template.

It´s there something I´m missing.

Edit: I changed a little bit beer-list-app.html adding the dom-module. Now the json error has dissappeared and the log appears as follows:

Initializing stored value.
beer-list-app.html:33 BrandData: 
app-storage-behavior.html:350 Got stored value! undefined []

Edit 2: I modified the code from data-changed function in beer-list-app.html as getbuckts suggested. My console logs the newData as empty.

Thanks in advance.

Dargor
  • 93
  • 1
  • 9
  • Can you paste the contents of branddata....take out the template dom-repeat, add an observer to branddata property and console.log(this.branddata); As a side note, I think you want to use firebase-document instead of firebase-query – getbuckts Aug 09 '16 at 17:03
  • I have added the observer as in here: https://elements.polymer-project.org/elements/polymerfire?active=firebase-query . I doesn´t enter through dataChanged Function. I´ve just stop the executionon the log funcion of firebase-query and execute console.log(this.data) returning {{brandata}}, then I´ve executed console.log(this.branddata) and returns undefined. – Dargor Aug 09 '16 at 21:13
  • Just refined the code a little bit, console log for this.branddata returns [] – Dargor Aug 09 '16 at 21:42
  • add notify:true to brand data property description and it should run the dataChanged function – getbuckts Aug 09 '16 at 22:01
  • Now DataChanged function works but console.log(this.branddata) returns empty ([]) – Dargor Aug 10 '16 at 06:19
  • console.log(newData), update your code to what you have changed as well. – getbuckts Aug 10 '16 at 17:00
  • I have also a similar problem but using . Returned database data is empty. :-( – Diego Cerdan Puyol Oct 07 '16 at 01:22

1 Answers1

0

Are you logged in into the application? I was have with the same problem until decide to see my permissions. Try to change your permissions.

Evaldo Barbosa
  • 21
  • 1