W3.JS Menampilkan Data HTML
Menampilkan data dalam HTML:
w3.displayObject(selector)
Mudah digunakan
Cukup tambahkan tanda kurung {{ }} ke elemen HTML apa pun untuk menyediakan ruang bagi data Anda:
Contoh
<div id="id01">
{{firstName}} {{lastName}}
</div>
Terakhir panggil w3.displayObject untuk menampilkan data dalam HTML Anda:
Contoh
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
Parameter pertama adalah id dari elemen HTML yang akan digunakan (id01).
Parameter kedua adalah objek data yang akan ditampilkan (myObject).
Menampilkan Objek yang Lebih Besar
Untuk mendemonstrasikan kekuatan W3.JS, kami akan menampilkan objek JavaScript yang lebih besar (myObject).
Objeknya adalah larik objek pelanggan dengan properti NamaPelanggan, Kota, dan Negara:
objek saya
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"}
]};
Mengisi Dropdown
Contoh
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Mengisi Daftar
Contoh
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Menggabungkan w3.displayObject dengan w3.includeHTML
Saat Anda menyertakan cuplikan HTML di halaman web, Anda harus memastikan bahwa fungsi lain yang bergantung pada HTML yang disertakan tidak dijalankan sebelum HTML disertakan dengan benar.
Cara termudah untuk "menahan" kode adalah dengan menempatkannya di fungsi panggilan balik.
Fungsi panggilan balik dapat ditambahkan sebagai argumen ke w3.includeHTML():
Contoh
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Mengisi Kotak Centang
Contoh
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Mengisi Kelas
Contoh
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Mengisi Tabel
Contoh
<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>
Mengisi Elemen <select>
Contoh
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>