How to iterate array in nested component ? (Polymer)

Question

I try to pass an array to my child component (macroNutriments) and iterate it but it's not working, it seems like the array is not passed at all. The other data are displayed though. I'm totaly new to Polymer.

My parent component :

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../macro-aliment/macro-aliment.html">
    <dom-module id="macro-aliments">
      <template>
        <template is="dom-repeat" items="{{aliments}}">
          <macro-aliment
            nom = '{{item.nom}}'
            quantite = '{{item.quantite}}'
            image = '{{item.image}}'
            macroNutriments = '{{item.macroNutriments}}'
          >
        </macro-aliment>
        </template>
      </template>

      <script>
        Polymer({

          is: 'macro-aliments',
          ready : function () {
            this.aliments = [
              {
                nom : 'banane',
                quantite : '100g',
                image : 'images/banane.svg',
                macroNutriments : [
                  {
                    nom : 'Glucides',
                    valeur : '13g'
                  },
                  {
                    nom : 'Protéines',
                    valeur : '25g'
                  },
                  {
                    nom : 'Lipides',
                    valeur : '10g'
                  }
                ]
              },
              {
                nom : 'pomme',
                quantite : '1',
                image : 'images/pomme.svg',
                macroNutriments : [
                  {
                    nom : 'Glucides',
                    valeur : '13g'
                  },
                  {
                    nom : 'Protéines',
                    valeur : '25g'
                  },
                  {
                    nom : 'Lipides',
                    valeur : '10g'
                  }
                ]
              }
            ]
            }
          }
        );
      </script>
    </dom-module>

My child component :

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="macro-aliment">
  <template>

  <figure>
    <img src="{{image}}" alt="">
    <figcaption>
      <header>
        <h1>{{nom}}</h1>
        <span>{{quantite}}</span>
        <span>{{macroNutriments}}</span>
      </header>
      <ul>
        <template is="dom-repeat" items="{{macroNutriments}}">
          <li>
            <span>{{item.valeur}}</span>
            <span>{{item.nom}}</span>
          </li>
        </template>
      </ul>
    </figcaption>
  </figure>
  </template>

  <script>
    Polymer({

      is: 'macro-aliment',

      properties : {
        nom : String,
        quantite : String,
        image : String,
        macroNutriments : Array,
      },


    });
  </script>
</dom-module>

Any ideas ?

Redas Jarušaitis · Accepted Answer · 2017-03-03 15:12:37Z

Problem is here:

macroNutriments : Array,

This property name is in camelCase style, so you should access it like this:

<macro-aliment
        nom = '{{item.nom}}'
        quantite = '{{item.quantite}}'
        image = '{{item.image}}'
        macro-nutriments = '{{item.macroNutriments}}'
></macro-aliment>

macroNutriments = ... changes to macro-nutriments = ...

Instead of uppercase character, use dash (-) and the same character but in lowercase. This is just a HTML attributes thing.

Im suggesting two solutions.

Solution 1 (recommended)

Use only lower cases and snake_style for properties naming.

macro_nutriments : Array

I am using this in custom elements properties naming, so I do recommend it to use for you. Never had any problems with this.

This is also what W3Schools recommends. Quote from attributes page

The HTML5 standard does not require lowercase attribute names.

The title attribute can be written with uppercase or lowercase like
title or TITLE.

W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

Solution 2 (NOT recommended)

Use dash and lowercase letter when trying to access this property in HTML code. But this is little bit confusing and there's a VERY big chance that you will be forgetting this over and over again.

Good luck.

Jacob Miles · Accepted Answer · 2017-03-03 15:07:12Z

0

Try adding the property for ailments to your parent class.

is: 'macro-aliments',
properties: {
  ailments: {
    type: Array,
    notify: true
  }
},
ready: function(){  ...

answered Mar 3, 2017 at 15:07

Jacob Miles

3061 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to iterate array in nested component ? (Polymer)

2 Answers 2

Solution 1 (recommended)

Solution 2 (NOT recommended)

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1 (recommended)

Solution 2 (NOT recommended)

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related