Geek Answers Handbook

Polymer 1.0 passing a JSON string as a property

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

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 an empty array inside created as follows:

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

With Polymer 1.0, 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 to initialize an empty object in the same way, but I get the message data is undefined (see the attached screenshot) in the JavaScript console.

Here is a snippet that I use to initialize a JSON array:

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

The iteration is written inside the element as follows:

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

enter image description here

How can i do this?

+5
source share
1 answer

You're really on the right track! Here 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 } }

However, in your data binding template, you must ensure that there are no spaces inside the tag . Basically, you have to rewrite these lines

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

to that

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

Sources:

+6
source

More articles:


All Articles