node-json2html
Version:
json2html - HTML templating in pure javascript
64 lines (46 loc) • 2.09 kB
HTML
<html>
<head>
<title>json2html - 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">Creating your First Template</h2>
<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Understand how to create a simple tempate that maps data using both shorthand and longhand notation along with some simple logic to toggle the class name of an element.</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"></div>
</div>
</div>
</body>
<script>
//In this example we'll use a combination of shorthand and long hand notation
// to render a list of employees
//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 = {"<>":"div","html": [
{"<>":"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}"}
]};
//Render the template and attach to the body element
$("#body").html( json2html.render(employees,template) );
</script>
</html>