Let me begin by saying that I have been enjoying both w3.css and w3.js as they are both very small, easy to use, and have plenty to offer.
In an unsuccessful effort to display nested objects (evidently this was already discussed @
Because the following use case is fairly common and many of us are searching for various techniques for displaying complex objects, I would like to suggest that a reworked version of the following (which is itself based on an existing w3 example) be included in the w3.js documentation -- unless there are known caveats for using w3.displayObject in this manner.
Consider publishing an undocumented feature of w3.displayObject
in Suggestions
Posted
Let me begin by saying that I have been enjoying both w3.css and w3.js as they are both very small, easy to use, and have plenty to offer.
In an unsuccessful effort to display nested objects (evidently this was already discussed @
Because the following use case is fairly common and many of us are searching for various techniques for displaying complex objects, I would like to suggest that a reworked version of the following (which is itself based on an existing w3 example) be included in the w3.js documentation -- unless there are known caveats for using w3.displayObject in this manner.
<!DOCTYPE html>
<html>
<title>W3.JS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script>
var myObject= {
"DistrictID": 1,
"DistrictName": "European District",
"DistrictManager": "Alfreds Futterkiste",
"Customers":[
{"CustomerName" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},
{"CustomerName" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},
{"CustomerName" : "Ernst Handel","City" : "Graz","Country" : "Austria"},
{"CustomerName" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},
{"CustomerName" : "Galería del gastrónomo","City" : "Barcelona","Country" : "Spain"},
{"CustomerName" : "Island Trading","City" : "Cowes","Country" : "UK"},
{"CustomerName" : "Königlich Essen","City" : "Brandenburg","Country" : "Germany"},
{"CustomerName" : "Magazzini Alimentari Riuniti","City" : "Bergamo","Country" : "Italy"},
{"CustomerName" : "North/South","City" : "London","Country" : "UK"},
{"CustomerName" : "Paris spécialités","City" : "Paris","Country" : "France"},
{"CustomerName" : "Simons bistro","City" : "København","Country" : "Denmark"},
{"CustomerName" : "Vaffeljernet","City" : "Århus","Country" : "Denmark"},
{"CustomerName" : "Wolski Zajazd","City" : "Warszawa","Country" : "Poland"}
]};
</script>
<body>
<h2>Testing W3.JS with CSS</h2>
<div id="id01">
<h3>{{DistrictName}}</h3>
<h4>District Details</h2>
<table class="w3-table-all">
<tr>
<th>District ID</th>
<th>District Manager</th>
</tr>
<tr>
<td>{{DistrictID}}</td>
<td>{{DistrictManager}}</td>
</tr>
</table>
<h4>District Customers</h4>
<table class="w3-table-all">
<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>
</div>
<script>
w3.displayObject("id01", myObject);
</script>
</body>
</html>
Additionally, there are two different means to achieve the enumeration…
1) By simply referring to the object name and its properties:
<tr w3-repeat="Customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
2) Or for those who prefer the clarity of dot notation:
<tr w3-repeat="Customer in Customers">
<td>{{Customer.CustomerName}}</td>
<td>{{Customer.City}}</td>
<td>{{Customer.Country}}</td>
</tr>
As someone who appreciates w3.js, I believe this would be a useful addition to the online documentation and examples.