W3.JSはHTMLデータを表示します
HTMLでデータを表示する：
w3.displayObject(selector)
使いやすい
HTML要素に角かっこ{{}}を追加するだけで、データ用のスペースを予約できます。
例
<div id="id01">
{{firstName}} {{lastName}}
</div>
最後に、w3.displayObjectを呼び出して、HTMLでデータを表示します。
例
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
最初のパラメーターは、使用するHTML要素のID（id01）です。
2番目のパラメーターは、表示するデータオブジェクト（myObject）です。
より大きなオブジェクトの表示
W3.JSの能力を示すために、より大きなJavaScriptオブジェクト（myObject）を表示します。
オブジェクトは、CustomerName、City、およびCountryプロパティを持つcustomersオブジェクトの配列です。
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"}
]};
ドロップダウンを埋める
例
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
リストを埋める
例
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
w3.displayObjectとw3.includeHTMLの組み合わせ
WebページにHTMLスニペットを含める場合は、HTMLが適切に含まれる前に、含まれているHTMLに依存する他の関数が実行されないようにする必要があります。
コードを「抑える」最も簡単な方法は、コードをコールバック関数に配置することです。
コールバック関数は、引数としてw3.includeHTML（）に追加できます。
例
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
チェックボックスの入力
例
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
クラスを埋める
例
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
テーブルを埋める
例
<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>
<select>要素の入力
例
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>