JSFiddle - React, Tailwind, and code Playground

by Carlos Eduardo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<div id="output"></div>
<script type="template/handlebars" id="template"><table>
  <tr>
    <td>
      <div>
        <div>
          <div> Endereço de entrega </div>
            {{#each data.deliveries as |deliverie deliverieId|}}
              {{#each deliverie.items as |item itemId|}}
                <div>
                  <b>{{item.name}}</b>
                </div>
              {{/each}}
            {{/each}}
        </div>
        <br />
      </div>
    </td>
  </tr>
</table>
</script>

JavaScript

var template = Handlebars.compile(document.getElementById('template').innerHTML, {
  strict: true
});

document.getElementById('output').innerHTML = template({
  "DISPLAY_NAME": "Mateus",
  "data": {

    "deliveries": [{
      "items": [{
        "name": "iPhone 12 Pro Max"
      }],
      "deliveryAddress": {
        "street": "Rua Vitorino Carmilo"
      },
      "status": "ready-for-handling"
    }]
  }
});