W3.JS Mostrar datos HTML
Mostrar datos en HTML:
w3.displayObject(selector)
Fácil de usar
Simplemente agregue corchetes {{ }} a cualquier elemento HTML para reservar espacio para sus datos:
Ejemplo
<div id="id01">
{{firstName}} {{lastName}}
</div>
Finalmente llame a w3.displayObject para mostrar los datos en su HTML:
Ejemplo
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
El primer parámetro es el id del elemento HTML a usar (id01).
El segundo parámetro es el objeto de datos a mostrar (myObject).
Mostrar un objeto más grande
Para demostrar el poder de W3.JS, mostraremos un objeto JavaScript más grande (myObject).
El objeto es una matriz de objetos de clientes con las propiedades CustomerName, City y Country:
miObjeto
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"}
]};
Llenar un menú desplegable
Ejemplo
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Llenar una lista
Ejemplo
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Combinando w3.displayObject con w3.includeHTML
Cuando incluye fragmentos de HTML en una página web, debe asegurarse de que otras funciones que dependen del HTML incluido no se ejecuten antes de que el HTML se incluya correctamente.
La forma más fácil de "retener" el código es colocarlo en una función de devolución de llamada.
Se puede agregar una función de devolución de llamada como argumento a w3.includeHTML():
Ejemplo
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Llenar casillas de verificación
Ejemplo
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Clases de llenado
Ejemplo
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Llenar una mesa
Ejemplo
<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>
Llenar un elemento <select>
Ejemplo
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>