Jump to content

Problem using w3.js Display


Recommended Posts

Is there any way to display complex objects with w3.displayObject("id01", myObject) w3.js function ?

<!DOCTYPE html>
<html>
<title>W3.JS</title>
<meta charset="utf-8">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script>
var myObject= {"customers":[
{"CustomerName" : "Alfreds Futterkiste", "Address": {"City" : "Berlin","Country" : "Germany"}},
{"CustomerName" : "Berglunds snabbköp", "Address": {"City" : "Luleå","Country" : "Sweden"}},
{"CustomerName" : "Centro comercial Moctezuma", "Address": {"City" : "México D.F.","Country" : "Mexico"}},
{"CustomerName" : "Ernst Handel", "Address": {"City" : "Graz","Country" : "Austria"}},
{"CustomerName" : "FISSA Fabrica Inter. Salchichas S.A.", "Address": {"City" : "Madrid","Country" : "Spain"}}
]};
</script>
<body>
<h2>Testing W3.JS in HTML</h2>
<table id="id01">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr w3-repeat="customers">
    <td>{{CustomerName}}</td>
    <td>{{Address.City}}</td>
    <td>{{Address.Country}}</td>
  </tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
</body>
</html> 

Result:


Customer	City	Country
Alfreds Futterkiste	{{Address.City}}	{{Address.Country}}
Berglunds snabbköp	{{Address.City}}	{{Address.Country}}
Centro comercial Moctezuma	{{Address.City}}	{{Address.Country}}
Ernst Handel	{{Address.City}}	{{Address.Country}}
FISSA Fabrica Inter. Salchichas S.A.	{{Address.City}}	{{Address.Country}}

 

Thanks !

Edited by mpoirier
Added result
Link to post
Share on other sites
  • 3 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...