W3.JS Display
Display Data in HTML Elements
Display data in HTML:
w3.displayObject(selector)
Easy to Use
Just add brackets {{ }} to any HTML element to reserve space for your data:
Example
<div id="id01">
{{firstName}} {{lastName}}
</div>
Finally call w3.displayObject to display the data in your HTML:
Example
<script>
var myObject = {"firstName" : "John", "lastName" :
"Doe"};
w3.displayObject("id01", myObject);
</script>
The first parameter is the id of the HTML element to use (id01).
The
second parameter is the data object to display (myObject).
Displaying a Larger Object
To demonstrate the power of W3.JS, we will display a larger JavaScript object (myObject).
The object is an array of customers objects with the CustomerName, City, and Country properties:
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"}
]};
Filling a Dropdown
Example
<select id="id01">
<option w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Filling a List
Example
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Filling Check Boxes
Example
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input
type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Filling Classes
Example
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Filling a Table
Example
<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>
Filling a <select> Element
Example
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford",
"BMW", "Mercedes"]});
</script>
