How to pass an Array as element's Attribute?

Question

I'm developing for sending an Array as element's attribute.

File form-list.html

<dom-module id="form-list">
  <template>
    <div>{{title}} - {{owner}} </div>
    <form>
      <template is="dom-repeat" items="{{inputAndLabel}}">
          <div><label>{{item.tag}} {{owner}}</label><input type="{{item.type}}" value="{{item.defaultValue}}"></div>
      </template>
    </form>
  </template>

  <script>
    Polymer({
      is: 'form-list',
      properties: {
        owner: {
          value:"Mechanical",
        },
        inputAndLabel: {
          type: Array,
          value: function() { return []; }
        }
      },
      ready: function() {
        this.title = 'Formulario: Usuario';
      }
    });
  </script>
</dom-module>

So, for using the element and pass the inputAndLabel propertie (it's an Array) that is not work, but the owner property works (it's a string).

<form-list inputAndLabel="[
        {defaultValue: '', type:'text', tag: 'Nombre' },
        {defaultValue: '', type:'text', tag: 'Apellido' },
        {defaultValue: '', type:'text', tag: 'Email' },
        {defaultValue: '', type:'text', tag: 'Dirección' }]" owner="Eternal">
</form-list>

How to send an array as custom element's property?

Thanks

Answer 1

According to polymer documentation you can pass an array as an element attribute it you respect the strict JSON notation.

For object and array properties you can pass an object or array in JSON format:

<my-element book='{ "title": "Persuasion", "author": "Austen" }'></my-element>

Note that JSON requires double quotes, as shown above.

<form-list input-and-label='[
        {"defaultValue": "", "type":"text", "tag": "Nombre" },
        {"defaultValue": "", "type":"text", "tag": "Apellido" },
        {"defaultValue": "", "type":"text", "tag": "Email" },
        {"defaultValue": "", "type":"text", "tag": "Dirección" }]'   owner="Eternal">
</form-list>

Also note that the corresponding attribute for the inputAndLabel property is written input-and-label.