Naga Sai A
2017-07-17 03:08:51 UTC
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");
}
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+***@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/83dc1d6e-0692-40fd-8393-4e340969dc5c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
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");
}
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+***@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/83dc1d6e-0692-40fd-8393-4e340969dc5c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.