Polymer 1.0 passing JSON string as proprty

Question

I am back with new question and looking for expert help once again!

In my Polymer 0.5 project I had a JSON array passed to a property like this:

<horizontal-barset max="3320000" data='[
{"title": "Annuals", "prevord": "1-15-2015",
  "ds": [
  {"subhead": "Last Year Sales", "value": "2960000", "className" : "last-year"},
  {"subhead": "YTD", "value": "1956000", "className" : "ytd"},
  {"subhead": "Previous Order", "value": "480000", "className" : "prev-order"}
  ]
},
{"title": "Perennials", "prevord": "1-15-2015",
  "ds": [
  {"subhead": "Last Year", "value": "540000", "className" : "last-year"},
  {"subhead": "YTD", "value": "2140000", "className" : "ytd"},
  {"subhead": "Previous Order", "value": "320000", "className" : "prev-order"}
  ]
},
{"title": "Totals", "prevord": "1-15-2015",
  "ds": [
  {"subhead": "Last Year", "value": "3320000", "className" : "last-year"},
  {"subhead": "YTD", "value": "1350000", "className" : "ytd"},
  {"subhead": "Previous Order", "value": "1700000", "className" : "prev-order"}
  ]
}
]'>
</horizontal-barset>

and in the element I initialized the empty array inside created like this:

created: function(){
  this.data=[];
}

With Polymer 1.0 the properties are now written in a different approach:

properties: {
  max: {type: String},
  data: [] //(not sure this is the corrent approach! I also tried data: Object)
}

Then like 0.5 I tried initialize the empty object in the similar fashion, but getting data is undefined (please see the attached screenshot) error in JavaScript console.

Here is the snippet I am using to initialize the JSON array:

created: function(){
  this.data = [];
}

The iteration is written inside the element like this:

<template is="dom-repeat" items="{{data}}">
  <div class="rack-container">
    <p>{{item.title}}</p>
    <template is="dom-repeat" items="{{item.ds}}">
      <div class="rack">
        <div class="rack-bar">
          <div class="rack-head">
            {{item.subhead}}
          </div> 
          <!--<span style="width:{{ (row.value / max) * 100}}%;line-height:2em;" class="{{row.className}} rack-fill">&nbsp;</span>-->
          <div class="clear"></div>
        </div>
      <div class="rack-value">{{item.value}}</div>
      <div class="clear"></div>
  </div>
</template>
          </div>
      </template>

How can I accomplish this?

Answer 1

You're actually on the right track! Here's how you can declare an array property:

properties: {
  max: {type: String},
  data: {
    type: Array, // Available property types are String, Number, Boolean, Array, and Object
    value: function () { return []; } // Default value
  }
}

On your data-binding template however, you have to make sure that there are no whitespace inside the tag. Basically, you'll have to rewrite this lines

<div class="rack-head">
  {{item.subhead}}
</div> 

to this

<div class="rack-head">{{item.subhead}}</div> 

Sources:

• https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-serialization
• https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content