# Passing html code through moustache

**URL:** <https://discourse.nodered.org/t/passing-html-code-through-moustache/64516>\
**Category:** Dashboard\
**Created:** [29 June 2022 20:26 UTC](https://discourse.nodered.org/t/passing-html-code-through-moustache/64516 "2022-06-29T20:26:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevinksdroid](https://avatars.discourse-cdn.com/v4/letter/k/4af34b/32.png) [@kevinksdroid](https://discourse.nodered.org/u/kevinksdroid)\
**Post date:** [29 June 2022 20:26 UTC](https://discourse.nodered.org/t/passing-html-code-through-moustache/64516/1 "2022-06-29T20:26:25Z")

</div>

I am trying to create a table that has to populate the headers based on a drop-down selection. The UI Template code for the table is as follows

```auto
<table class="GeneratedTable">
  <thead>
    <tr>
      <th><div align="left">SN:</div></th>
      <th><div align="left">Timestamp</div></th>
      {{msg.code}}

    </tr>
  </thead>
  
    <tr ng-repeat="row in msg.payload | limitTo:5000 ">
	<td>{{$index+1}}</td>
      <td><div align="left">{{row.timestamp}}</div></td>
      <td><div align="left">{{row.data1}}</div></td>
      <td><div align="left">{{row.data2}}</div></td>
    </tr>
  
</table>

```

the {{msg.code}} moustache is a string generated based on the dropdown selection, for example:

```auto
<th><div align="left">DATA1</div></th>
<th><div align="left">DATA2</div></th>

```

however it doesn't seem to populate the table header, the moustache code just appears above the table header. If I paste the above code the table is populated. Can someone let me know what I am doing wrong?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 June 2022 20:33 UTC](https://discourse.nodered.org/t/passing-html-code-through-moustache/64516/2 "2022-06-29T20:33:07Z")

</div>

Try triple curly brackets (see the template node built-in help for why)

---

<div class="post-metadata">

**Author:** ![kevinksdroid](https://avatars.discourse-cdn.com/v4/letter/k/4af34b/32.png) [@kevinksdroid](https://discourse.nodered.org/u/kevinksdroid)\
**Post date:** [29 June 2022 20:35 UTC](https://discourse.nodered.org/t/passing-html-code-through-moustache/64516/3 "2022-06-29T20:35:11Z")

</div>

tried that just now, the table appeared as below

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/69c288f8087b797402e9e270a3a60c9b7aba6ae2.png)

here is the full code for UI template

```auto

<!-- CSS Code: Place this code in the document's head (between the 'head' tags) -->
<!-- CSS Code: Place this code in the document's head (between the 'head' tags) -->
<style>
table.GeneratedTable {
  width: 100%;
  background-color: #d1eaea;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #ffffff;
  border-style: solid;
  color: #000000;
}

table.GeneratedTable td, table.GeneratedTable th {
  border-width: 2px;
  border-color: #ffffff;
  border-style: solid;
  padding: 10px;
}

table.GeneratedTable thead {
  background-color: #9690ea;
}
</style>

<!-- HTML Code: Place this code in the document's body (between the 'body' tags) where the table should appear -->
<table class="GeneratedTable">
  <thead>
    <tr>
      <th><div align="left">SN:</div></th>
      <th><div align="left">Timestamp</div></th>
      {{{msg.code}}}

    </tr>
  </thead>
  
    <tr ng-repeat="row in msg.data | limitTo:5000 ">
	<td>{{$index+1}}</td>
      <td><div align="left">{{row.timestamp}}</div></td>
      <td><div align="left">{{row.data1}}</div></td>
      <td><div align="left">{{row.data2}}</div></td>
    </tr>
  
</table>
<p>{{msg.clear}}</p>
<!-- Codes by Quackit.com -->

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 June 2022 20:55 UTC](https://discourse.nodered.org/t/passing-html-code-through-moustache/64516/4 "2022-06-29T20:55:45Z")

</div>

Add a debug node just before the template g show us what is inside msg.code

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 June 2022 21:02 UTC](https://discourse.nodered.org/t/passing-html-code-through-moustache/64516/5 "2022-06-29T21:02:15Z")

</div>

> [@kevinksdroid](#):
>
> UI template

Wait, i missed the fact you were using a ui-template. Mustache syntax is only supported in the template node. You can generate the HTML in a regular template and pass it to a ui-template using `msg.template` (its in the the built in help)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 July 2022 21:02 UTC](https://discourse.nodered.org/t/passing-html-code-through-moustache/64516/6 "2022-07-29T21:02:43Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.