W3.JS Display HTML Data
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>
Combining w3.displayObject with w3.includeHTML
When you include HTML snippets in a web page, you must secure that other functions that depend on the included HTML do not execute before the HTML is properly included.
The easiest way to "hold back" code is to place it in a callback function.
A callback function can be added as an argument to w3.includeHTML():
Example
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
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>