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

• un ensemble de balises <span> dans un bloc <p>
• un ensemble de balises <p> dans un bloc <div>
• une ligne d'un tableau
• une ligne dans une liste déroulante
• un item dans une liste à puce ou numérotée

Le premier data-object utilisé ici, myDataObject, est un objet ayant comme valeur un tableau d'objets. La clé de cet objet est "lignes".

Le second data-object utilisé ici, myDataObject2, est un objet ayant comme valeur un tableau de valeurs. La clé de cet objet est "lignes".

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

/*w3.getHttpObject("customers.js", myCtrl); // requiert une connexion au serveur */

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"}
]};

function myCtrl(myDataObject){
  w3.displayObject("tableau", myDataObject);
}

function myCtrl2(myDataObject){
  w3.displayObject("div2", myDataObject);
}

function myCtrl3(myDataObject){
  w3.displayObject("list", myDataObject);
}

function myCtrl4(myDataObject){
  w3.displayObject("ul", myDataObject);
}

myCtrl(myDataObject);
myCtrl2(myDataObject);
myCtrl3(myDataObject);
myCtrl4(myDataObject);


var myDataObject2={
"lignes":["Alfreds Futterkiste","Berglunds snabbköp","Vaffeljernet","Wolski Zajazd"]};

function Ctrl(myDataObject){
  w3.displayObject("tableau2", myDataObject);
}

function Ctrl2(myDataObject){
  w3.displayObject("div2b", myDataObject);
}

function Ctrl3(myDataObject){
  w3.displayObject("list2", myDataObject);
}

function Ctrl4(DataObject){
  w3.displayObject("ul2", DataObject);
}

Ctrl(myDataObject2);
Ctrl2(myDataObject2);
Ctrl3(myDataObject2);
Ctrl4(myDataObject2);

var myDataObject3={
"lignes":[
  {"a":"aabamail1@skynet.be"},{"a":"mail7@Hotmail.com"},
  {"a":"abygail.nouvelle@oxygene.be"},{"a":"mail447@gmail.com"},
  {"a":"airdsfsdfel1952@hotmail.fr"},{"a":"sdfsd.devreux@gmail.com"},
  {"a":"sdfddzret@yahoo.com"},{"a":"alasdfsddsns@icloud.com"},
  {"a":"alasdfsdddel@skynet.be"},{"a":"alasdfsddddle77@gmail.com"},
  {"a":"alain@toftdddzdatre.be"},{"a":"alainsddsedcts14@msn.com"},
  {"a":"alasdfeczgeck@gmail.com"},{"a":"alasdfesddjon@gmail.com"},
  {"a":"alaisfsdesims@outlook.com"},{"a":"alexsdfefthklitz@outlook.com"},
  {"a":"alexsdzehezlchas@gmail.com"},{"a":"alexsdehheres@skynet.be"},
  {"a":"asdeee78u75@hotmail.com"},{"a":"aldfeee@nysresens.be"},
  {"a":"Alsseege.tyanie@gmail.com"},{"a":"andsdee3illon09@gmail.com"},
  {"a":"anadesgesaux@yahoo.fr"},{"a":"anddedfgijkchas@gmail.com"},
  {"a":"andrfff5655@gmail.com"},{"a":"anndfrrft8uslin@hotmail.com"},
  {"a":"anffr89rlon@gmail.com"},{"a":"anndfrrflo@gmail.com"}
]};

function Ctrl5(Data){
  w3.displayObject("listEmail", Data);
}

Ctrl5(myDataObject3);

Répétition dans un paragraphe

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

L'espace vide (sécable) après la virgule est important.
Rappel : Dans les champs (A, Cc et Cci) d'une messagerie, les adresses e-mails sont séparées par une virgule.

Répétition d'un ensemble de balises

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

dans un tableau

      <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>

dans une liste déroulante

      <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>

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>