Affichage d'un objet
Le but de W3Data est d'afficher des données dans les pages HTML.
Pour démontrer la puissance de W3Data, nous allons afficher un objet JavaScript (myObject).
L'objet est un tableau d'objets de clients avec le CustomerName, City, et les propriétés de Pays:
myObject
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 un Dropdown
Exemple
<select id="id01">
<option w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3DisplayData("id01", myObject);
</script> Try It Yourself » Remplir une liste
Exemple
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3DisplayData("id01", myObject);
</script> Try It Yourself » Remplissage des cases à cocher
Exemple
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
<td><input
type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script> Try It Yourself » remplissage Classes
Exemple
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script> Try It Yourself » Exemple
<table id="id01">
<tr w3-repeat="customers" class="{{Size}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script> Try It Yourself » 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>
w3DisplayData("id01", myObject);
</script> Try It Yourself »