javascript - Polymer dom-repeat error parsing the array inside the object -

trying fiddle polymer framework small project. polymer dom-repeat error parsing array inside object

following code invocation

  <paper-tabs scrollable selected={{selected}}>     <template is="dom-repeat" items="{{rooms}}">       <paper-tab>{{item.name}}</paper-tab>     </template>   </paper-tabs>    <iron-pages selected="{{selected}}">     <template is="dom-repeat" items="{{rooms}}">       <div> <port-config room-config="{{item}}"></port-config> </div>     </template>   </iron-pages>  </template>  <script> polymer({     is: "rooms-config",      properties: {      selected: {         type:number,         value: 0,       },      rooms: {         type: array,         value: function() {           var testdata = [             {               name: "room1",               maxports: 16,               ports:{                 type: array,                 value: function() {                   var testdata = [                     {portname: "port 1",portstatus: "true"},                     {portname: "port 2",portstatus: "true"},                     {portname: "port 3",portstatus: "true"},                     {portname: "port 4",portstatus: "true"},                   ];                   return testdata;                 }               }             }         }      } }); 

following port-config declaration

<template> <paper-material elevation="-1">   <template is="dom-repeat" items="{{roomconfig.ports}}">     <div class="container">       <div class="flexchild">{{item.portname}}</div>       <div class="flex1child">         <paper-toggle-button toggles checked$="{{item.portstatus}}"></paper-toggle-button>       </div>       <div class="flex1child"><iron-icon icon="icons:settings"></iron-icon></div>       </div>   </template> </paper-material> </template>  <script> polymer({     is: "port-config",     properties: {      roomconfig: {       type: object,       value: function() {          return {};       }     }   } });  </script> 

with setup getting error [dom-repeat::dom-repeat]: expected array items, found object {}

the problem should on attribute's value you're passing functions instead of values.

for example:

rooms: {         type: array,         value: function() {           var testdata = [             {               name: "room1",               maxports: 16,               ports:{                 type: array,                 value: function() {                   var testdata = [                     {portname: "port 1",portstatus: "true"},                     {portname: "port 2",portstatus: "true"},                     {portname: "port 3",portstatus: "true"},                     {portname: "port 4",portstatus: "true"},                   ];                   return testdata;                 }               }             }           ] // you've missed close bracket.          }      } 

this room attribute should writed this:

rooms: {   type: array,   value: [     {       name: "room1",       maxports: 16,       ports: [         {portname: "port 1",portstatus: "true"},         {portname: "port 2",portstatus: "true"},         {portname: "port 3",portstatus: "true"},         {portname: "port 4",portstatus: "true"},       ]     }   ] } 

there're other places on code you're doing this, you'll need fix them too.