node-json2html
Version:
json2html - HTML templating in pure javascript
84 lines (62 loc) • 3 kB
HTML
<html>
<head>
<title>json2html - jquery Tutorial</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- json2html -->
<script src="../json2html.js"></script>
</head>
<body>
<div class="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
<!-- Header -->
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Using with jQuery</h2>
<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Understand how to create templates with embedded events that can be used with jQuery.</p>
<p class="mx-auto mt-6 max-w-xl text-base leading-8 text-gray-400">Right click and 'View page source' to see how this page was rendered.</p>
</div>
<!-- Tutorials -->
<div id="body" class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl border rounded p-10">
<ul></ul>
</div>
</div>
</div>
</body>
<script>
//In this example we'll use the same list of employees but add a button were can can remove them from the list
$(()=>{
//Data that we want to render
const employees = [
{"name":"Jenny Brown","role":"CEO","management":true},
{"name":"Ashley White","role":"CFO","management":true},
{"name":"Brandon Green","role":"Graphic Designer"},
{"name":"Sasha Black","role":"Front End Developer"}
];
//Template we'll use to render these employees
const template = {"<>":"li","class":"group ","html": [
//Span element with special logic for the class property
{"<>":"span","class":o=>{
//If the user is part of managemnt then put them in blue
if(o.management) return("text-red-600");
else return("text-pink-600");
},"text":"${name} - ${role}"},
//Add a button to remove this employee from the list
// not a great idea using an inline style, but shows that we can add any property to the DOM element
{"<>":"a","class":"ml-5 text-indigo-100 group-hover:text-indigo-800","href":"#","html":"×","title":"remove","onclick":function(e){
//e.event => jquery event
//e.obj => object we're rendering
//e.data => data object we can optional assign during the render call
//Stop the link from navigating away
// example of how can can acces the jquery event
e.event.preventDefault();
//Access this element's parent (the top level li element)
// then remove it
$(this).parent().remove();
}}
]};
$("#body ul").json2html(employees,template);
});
</script>
</html>