JSFiddle - React, Tailwind, and code Playground

by 76484

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
<script id="Template" type="text/template">
	{{#each as}}
    {{#each bs}}
        <h4>{{@index}}</h4>
    		<pre>{{lookup ../bs}}</pre>
        <pre>{{lookup ../cs @index}}</pre>
    {{/each}}
	{{/each}}
</script>

JavaScript

const root = {
	as: [
    {
      bs: ['AS[0], BS[0]', 'AS[0], BS[1]', 'AS[0], BS[2]'],
      cs: ['AS[0], CS[0]', 'AS[0], CS[1]', 'AS[0], CS[2]']
    },
    {
      bs: ['AS[1], BS[0]', 'AS[1], BS[1]', 'AS[1], BS[2]'],
      cs: ['AS[1], CS[0]', 'AS[1], CS[1]', 'AS[1], CS[2]']
    },
    {
      bs: ['AS[2], BS[0]', 'AS[2], BS[1]', 'AS[2], BS[2]'],
      cs: ['AS[2], CS[0]', 'AS[2], CS[1]', 'AS[2], CS[2]']
    }
  ]
};

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

document.body.innerHTML = template(root);