Polymer 2.0- Error while using Array of objects with dom-repeat

Naga Sai A

unread,

Jul 16, 2017, 11:08:51 PM7/16/17

to Polymer

Hi

I am trying to loop through the array of objects using dom-repeat and getting below error

Polymer::Attributes: couldn't decode Array as JSON: {{test}}

I tried changing attr type as Array and Object but no luck .

I found solution for similar error message here - https://github.com/Polymer/polymer/issues/1693

But I am using the same solution suggested but getting same error again

Codepen- https://codepen.io/nagasai/pen/bRJvbK

HTML:

<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<div class="toolbar">
</head>


<body>
        
<dom-module id="custom-form">
  <template>
    <style>
      :host {
        display: block;
      }




    </style>
    <div>


   <div>
     <pre>[[attr]]</pre>
     <template is="dom-repeat" items="{{attr}}">
             <label>{{item.title}}</label>
             <input type="{{item.type}}"
                    required="{{item.required}}"
                    value="{{item.value}}"
                    disabled="{{item.disabled}}"
                    size="{{item.size}}"
                    oninput="{{item.oninput}}"
                    on-click="{{item.onclick}}"
                    onchange="{{item.onchange}}"
                    onfocus="{{item.onfocus}}"
                    onkeydown="{{item.onkeydown}}"
                    onkeypress="{{item.onkeypress}}"
                    onkeyup="{{item.onkeyup}}()"
                    >
         </template>
   </div>


    </div>




  </template>




</dom-module>
  <custom-form attr="{{test}}"></custom-form>
</body>

JS:

/**
     * @customElement
     * @polymer
     */


class CustomForm extends Polymer.Element {
  static get is() {
    return "custom-form";
  }
  static get properties() {
    return {
      attr: {
        type: Array
      }
    };
  }
}
customElements.define(CustomForm.is, CustomForm);


let test = [
  {
    element: "input",
    type: "text",
    title: "Name",
    name: "name",
    value: "",
    size: "30",
    class: "",
    required: "required",
    disabled: "",
    onblur: "",
    onchange: "",
    onclick: "display()",
    onfocus: "",
    oninput: "",
    onkeydown: "",
    onkeypress: "",
    onkeyup: "",
    id: 0
  },
  {
    element: "checkbox",
    type: "checkbox",
    title: "Checkbox",
    name: "name",
    value: "",
    size: "30",
    class: "",
    required: "required",
    disabled: "",
    onchange: "",
    onclick: "",
    onselect: "",
    id: 1
  }
];


function display(){
  alert("hi");
}

abhishek gupta

unread,

Jul 17, 2017, 2:46:43 AM7/17/17

to Polymer

You are using polymer binding outside of dom-module. That will not work. In order to test your element you can pass it an array like

<custom-form attr="[1,2,3,4,5]"></custom-form>

Naga Sai A

unread,

Jul 17, 2017, 10:13:43 AM7/17/17

to Polymer

Thanks Abhishek, my question is how to dom repeat array of objects?

abhishek gupta

unread,

Jul 18, 2017, 11:24:36 AM7/18/17

to Polymer

The error you are getting is not because you are not using dom-repeat properly but because you are not passing an Array to it.

Naga Sai A

unread,

Jul 18, 2017, 11:30:57 AM7/18/17

to Polymer

Abhishek, I am using below array of objects , ideally it should work even with array of object , every indexed position have an object

abhishek gupta

unread,

Jul 19, 2017, 2:59:30 AM7/19/17

to Polymer

What value of attr is getting printed in pre tag?

Naga Sai A

unread,

Jul 19, 2017, 10:57:09 AM7/19/17

to Polymer

empty

abhishek gupta

unread,

Jul 21, 2017, 7:55:41 AM7/21/17

to Polymer

try this

<custom-form attr='[{element: "input", type: "text", title: "Name", name: "name", value: "", size: "30", class: "", required: "required", disabled: "", onblur: "", onchange: "", onclick: "display()", onfocus: "", oninput: "", onkeydown: "", onkeypress: "", onkeyup: "", id: 0 }, {element: "checkbox", type: "checkbox", title: "Checkbox", name: "name", value: "", size: "30", class: "", required: "required", disabled: "", onchange: "", onclick: "", onselect: "", id: 1 }]' ></custom-form>

Reply all

Reply to author

Forward