W3.JS Exibir dados HTML
Exibir dados em HTML:
w3.displayObject(selector)
Fácil de usar
Basta adicionar colchetes {{ }} a qualquer elemento HTML para reservar espaço para seus dados:
Exemplo
<div id="id01">
{{firstName}} {{lastName}}
</div>
Por fim, chame w3.displayObject para exibir os dados em seu HTML:
Exemplo
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
O primeiro parâmetro é o id do elemento HTML a ser usado (id01).
O segundo parâmetro é o objeto de dados a ser exibido (myObject).
Exibindo um objeto maior
Para demonstrar o poder do W3.JS, exibiremos um objeto JavaScript maior (myObject).
O objeto é uma matriz de objetos clientes com as propriedades CustomerName, City e Country:
meuobjeto
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"}
]};
Preenchendo uma lista suspensa
Exemplo
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Preenchendo uma lista
Exemplo
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Combinando w3.displayObject com w3.includeHTML
Ao incluir trechos de HTML em uma página da Web, você deve garantir que outras funções que dependem do HTML incluído não sejam executadas antes que o HTML seja incluído corretamente.
A maneira mais fácil de "reter" o código é colocá-lo em uma função de retorno de chamada.
Uma função de retorno de chamada pode ser adicionada como um argumento para w3.includeHTML():
Exemplo
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Preenchendo caixas de seleção
Exemplo
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Aulas de Preenchimento
Exemplo
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Preenchendo uma tabela
Exemplo
<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>
Preenchendo um elemento <select>
Exemplo
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>