Le data-w3-repeat permet de répéter un ensemble de balises :

Cette page web (data-w3-repeat.htm) est liée au fichier data-w3-repeat.js qui contient 3 data-object :

var myDataObject = {
"lignes":[
  {"CustomerName" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},
  {"CustomerName" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},
  {"CustomerName" : "Vaffeljernet","City" : "Århus","Country" : "Denmark"},
  {"CustomerName" : "Wolski Zajazd","City" : "Warszawa","Country" : "Poland"}
]};

myDataObject, est un objet clé-valeur dont l'unique valeur est un tableau d'objets. La clé de cet objet est lignes.

```
var myDataObject2 = {
"lignes":[
  "Alfreds Futterkiste","Berglunds snabbköp","Vaffeljernet","Wolski Zajazd"
]};
```
myDataObject2, est un objet clé-valeur dont l'unique valeur est un tableau de valeurs. La clé de cet objet est lignes.
```
var myDataObject3 = {
"lignes":[
  {"1":"aabamail1@skynet.be"},{"1":"mail7@Hotmail.com"},
  {"1":"abygail.nouvelle@oxygene.be"},{"1":"mail447@gmail.com"},
  {"1":"anffr89rlon@gmail.com"},{"1":"anndfrrflo@gmail.com"}
]};
```
myDataObject3, est comme myDataObject, un objet clé-valeur dont l'unique valeur est un tableau d'objets. Mais, ici, chaque objet ne dispose que d'une clé-valeur (clé = "1"). Lorsqu'il n'existe qu'une seule clé, le stockage des données dans un tableau prend moins de place (suppression de la clé).

var myDataObject4 = {
"lignes":[
  "aabamail1@skynet.be","mail7@Hotmail.com",
  "abygail.nouvelle@oxygene.be","mail447@gmail.com",
  "anffr89rlon@gmail.com","anndfrrflo@gmail.com"
]};

myDataObject4, est un objet clé-valeur dont l'unique valeur est un tableau de valeurs. La clé de cet objet est lignes.

```
var myDataObject5 = {
"lignes":[
  "Alfreds Futterkiste","Berglunds snabbköp","Vaffeljernet","Wolski Zajazd"
]};
```
Lorsque l'unique valeur est un tableau de tableaux, il doit préalablement être transformé pour ressembler au myDataObject6 :
```
var myDataObject6 = {
"lignes":[
  {"1" : "Alfreds Futterkiste","2" : "Berlin",  "3" : "Germany"},
  {"1" : "Berglunds snabbköp", "2" : "Luleå",   "3" : "Sweden"},
  {"1" : "Vaffeljernet",       "2" : "Århus",   "3" : "Denmark"},
  {"1" : "Wolski Zajazd",      "2" : "Warszawa","3" : "Poland"}
]};
```
Cette transformation, préalable à l'affichage des données, peut être codée en JavaScript.
Code JS qui réalise cette transformation.

Puisqu'il n'existe pas de clés initialement, elles sont créées. Ici, elles correspondent à l'ordre des éléments des tableaux, en commençant par 1.

Ces data-object sont les contenus des variables du fichier JS. Ceci permet d'afficher les données sans être connecté à un serveur.

<p><span> ... </p>

  <p id="liste">
    <span data-w3-repeat="lignes">{{1}} ;</span>
  </p>

Pour permettre un retour à la ligne, il faut un espace (sécable) avant (ou après) la valeur (ici, une adresse e-mail).
⚠ Un programme de mise en forme du code HTML, tel que Tidy, peut retirer l'espace sécable qui débute ou termine le contenu de la balise HTML. Pour résoudre ce problème, il suffit de placer cet espace sécable avant le séparateur (ici, point-virgule)

Rappel : Dans les champs (A, Cc et Cci) d'une messagerie, les adresses e-mails sont séparées par une virgule ou un point-virgule.
Il est possible de faire un copier/coller. De copier ce qui est affiché dans une page web pour le coller dans champ (A, Cc et/ou Cci) d'un logiciel de messagerie.

Répétition dans un paragraphe : Aperçu

{{1}} ;

<div><p> ... </div>

Ici, un ou deux paragraphes

  <div id="div2">
    <div data-w3-repeat="lignes">
      <p>
        Nom : <strong>{{CustomerName}}</strong> - Ville : {{City}}
      </p>
      <p>
        Pays : {{Country}}
      </p>
    </div>
  </div>
  <hr />
  <div id="div2b">
    <div data-w3-repeat="xyz in lignes">
      <p>
        Ville : {{City}}
      </p>
    </div>
  </div>

Dans xyz in lignes, xyz vaut n'importe quoi.

Répétition d'un ensemble de balises : Aperçu

Nom : {{CustomerName}} - Ville : {{City}}

Pays : {{Country}}

Ville : {{City}}

<table><tr> ... </table>

      <table class="w3-table-all w3-hoverable" id="tableau">
        <thead>
          <tr class="w3-black">
            <th style="width:50%">Nom</th>
            <th style="width:25%">Ville</th>
            <th style="width:25%">Pays</th>
          </tr>
        </thead>
        <tbody>
          <tr class="item" data-w3-repeat="lignes">
            <td>{{CustomerName}}</td>
            <td>{{City}}</td>
            <td>{{Country}}</td>
          </tr>
        </tbody>
      </table>
      <hr />
      <table class="w3-table-all w3-hoverable" id="tableau2">
        <thead>
          <tr class="w3-black">
            <th>Nom</th>
          </tr>
        </thead>
        <tbody>
          <tr class="item" data-w3-repeat="a in lignes">
            <td>{{a}}</td>
          </tr>
        </tbody>
      </table>

Répétition d'une ligne d'un tableau > Aperçu

Nom	Ville	Pays
{{CustomerName}}	{{City}}	{{Country}}

Nom
{{CustomerName}}

<select><option> ... </select>

      <select id="list">
        <option data-w3-repeat="lignes">
          {{CustomerName}}
        </option>
      </select>
      <hr>
      <select id="list2">
        <option data-w3-repeat="a in lignes">
          {{a}}
        </option>
      </select>

Répétition d'une option > Aperçu

dans une liste

      <ul id="ul">
        <li data-w3-repeat="lignes">{{CustomerName}}</li>
      </ul>
      <hr>
      <ul id="ul2">
        <li data-w3-repeat="a in lignes">{{a}}</li>
      </ul>

Répétition d'un item > Aperçu

{{CustomerName}}

{{a}}