tutorial pengembangan web terbaru
 

W3Data Objects


Menampilkan Obyek

Tujuan dari W3Data adalah untuk menampilkan data dalam halaman HTML.

Untuk menunjukkan kekuatan W3Data, kami akan menampilkan objek JavaScript (myObject).

objek adalah sebuah array dari pelanggan benda dengan CustomerName, Kota, dan sifat Negara:

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"}
]};

Mengisi Dropdown a

Contoh

<select id="id01">
<option w3-repeat="customers">{{CustomerName}}</option>
</select>

<script>
w3DisplayData("id01", myObject);
</script>
Cobalah sendiri "

Mengisi sebuah Daftar

Contoh

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

<script>
w3DisplayData("id01", myObject);
</script>
Cobalah sendiri "

Mengisi Periksa box

Contoh

<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> 
Cobalah sendiri "

mengisi Kelas

Contoh

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

<script>
w3DisplayData("id01", myObject);
</script>
Cobalah sendiri "

Contoh

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

<script>
w3DisplayData("id01", myObject);
</script> 
Cobalah sendiri "

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>
w3DisplayData("id01", myObject);
</script>
Cobalah sendiri "