Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

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>

Try It Yourself »

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>

Try It Yourself » With CSS »


Filling a List

Example

<ul id="id01">
  <li w3-repeat="customers">{{CustomerName}}</li>
</ul>

<script>
w3.displayObject("id01", myObject);
</script>

Try It Yourself » With CSS »


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>

Try It Yourself » With CSS »


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> 

Try It Yourself » With CSS »


Filling Classes

Example

<table id="id01">
  <tr w3-repeat="customers" class="{{Color}}">
    <td>{{CustomerName}}</td>
  </tr>
</table>

<script>
w3.displayObject("id01", myObject);
</script>

Try It Yourself » With CSS »


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>

Try It Yourself » With CSS »


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>

Try It Yourself » With CSS »