JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id="template" type="text/handlebars">
<ul>
{{#eachvisibletags Tags}}
	<li>{{tag}}</li>
{{/eachvisibletags}}
</ul>
</script>
<div class="output"></div>

JavaScript

Handlebars.registerHelper('eachvisibletags', function(context, options) {
	//empty string for the html to go into
  var html = "";
	//loop through data
  for(var i=0, j=context.length; i<j; i++) {
  //if the current item starts with "!"
	if(context[i].tag.search("^!")) {
	//options holds the template, options.fn hold the precompiled html, context is the 			data.
		html +=(options.fn(context[i]))
  	}
  }
  
  //return structure in the same form it was given.
  return  html;
});

var data = {
	"Tags":	[
		{"tag": "test", "property": "A" },
		{"tag": "test", "property": "B" },
		{"tag": "test", "property": "C" },
		{"tag": "!test", "property": "D" },
	]
};

var template = Handlebars.compile( $('#template').html() );
$('.output').html(template(data));