JSFiddle - React, Tailwind, and code Playground

by panamaprophet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>
<div id="product-container"></div>
<script id="product-template" type="text/x-handlebars-template">
    {{#each data.item}} 
        <h2>{{name}}</h2>
    {{/each}}
</script>

JavaScript

/* global Handlebars */

let data  = {
  "status": {
    "success": true,
    "error": ""
  },
  "data": {
    "item": [
      {
        "name": "Test 1",
        "keywords": [
          "[asdad,dasdas]"
        ],
        "description": "xxzfrfa",
        "test": 12.3,
        "id": "584ab61344be2bd806ef276d"
      },
      {
        "name": "My test 2",
        "keywords": [
          "[zx,zz]"
        ],
        "description": "xz",
        "test": 53,
        "id": "584ab67b11b75c3a10fc1518"
      }
    ]
  }
}

function createHTML(productsData)
{
    var rawTemplate = document.getElementById("product-template").innerHTML;
    var compiledTemplate = Handlebars.compile(rawTemplate);
    var ourGeneratedHTML = compiledTemplate(productsData);
    var productContainer = document.getElementById("product-container");
    productContainer.innerHTML = ourGeneratedHTML;
}

createHTML(data)