Jump to content

Consider publishing an undocumented feature of w3.displayObject


Redbeard
 Share

Recommended Posts

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...