Polymer dom-repeat error parsing the array inside the object

问题

Trying to fiddle with Polymer framework for my small project. Polymer dom-repeat error parsing the array inside the object

Following is the 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 is my 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 this setup I am getting error [dom-repeat::dom-repeat]: expected array for items, found Object {}

回答1:

The problem should be that on the 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;
                }
              }
            }
          ] // Also you've missed this close bracket. 
        }
     }

This room attribute should be writed like 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 your code that you're doing this, so you'll need to fix them too.

来源：https://stackoverflow.com/questions/38835482/polymer-dom-repeat-error-parsing-the-array-inside-the-object

标签

javascript

polymer