W3.JS Afficher les données HTML
Afficher les données en HTML :
w3.displayObject(selector)
Facile à utiliser
Ajoutez simplement des crochets {{ }} à n'importe quel élément HTML pour réserver de l'espace pour vos données :
Exemple
<div id="id01">
{{firstName}} {{lastName}}
</div>
Appelez enfin w3.displayObject pour afficher les données dans votre HTML :
Exemple
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
Le premier paramètre est l'id de l'élément HTML à utiliser (id01).
Le deuxième paramètre est l'objet de données à afficher (myObject).
Affichage d'un objet plus grand
Pour démontrer la puissance de W3.JS, nous allons afficher un objet JavaScript plus grand (myObject).
L'objet est un tableau d'objets clients avec les propriétés CustomerName, City et Country :
monObjet
var myObject = {"customers":[
{"CustomerName":"Alfreds
Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Blauer See
Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar
Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}
]};
Remplir une liste déroulante
Exemple
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Remplir une liste
Exemple
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Combinaison de w3.displayObject avec w3.includeHTML
Lorsque vous incluez des extraits de code HTML dans une page Web, vous devez vous assurer que d'autres fonctions qui dépendent du code HTML inclus ne s'exécutent pas avant que le code HTML ne soit correctement inclus.
Le moyen le plus simple de "retenir" le code est de le placer dans une fonction de rappel.
Une fonction de rappel peut être ajoutée en tant qu'argument à w3.includeHTML() :
Exemple
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Remplissage des cases à cocher
Exemple
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Classes de remplissage
Exemple
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Remplir un tableau
Exemple
<table id="id01">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Remplissage d'un élément <select>
Exemple
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>