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

Vespers

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.

Sanative

Supersharp, For some reason, I first assign '[ {"defaultValue": "", "type":"text", "tag": "Nombre" }, {"defaultValue": "", "type":"text", "tag": "Apellido" }, {"defaultValue": "", "type":"text", "tag": "Email" }, {"defaultValue": "", "type":"text", "tag": "Dirección" }]' to variable str, then use <form-list input-and-label=str></form-list>, it do not work. Is it necessary to put the '[{...},...,{...}]' inline? – Kettledrummer

@Kettledrummer yes. you can't set a variable in the html code. As a workaround you could assign it in Javascript using setAttribute() – Sanative