THE WORLD'S LARGEST WEB DEVELOPER SITE

W3Data Objects


Displaying an Object

The purpose of W3Data is to display data in HTML pages.

To demonstrate the power of W3Data, we will display a 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>
w3DisplayData("id01", myObject);
</script>
Try It Yourself »

Filling a List

Example

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

<script>
w3DisplayData("id01", myObject);
</script>
Try It Yourself »

Filling Check Boxes

Example

<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 »

Filling Classes

Example

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

<script>
w3DisplayData("id01", myObject);
</script>
Try It Yourself »

Example

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

<script>
w3DisplayData("id01", myObject);
</script> 
Try It Yourself »

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>
w3DisplayData("id01", myObject);
</script>
Try It Yourself »