# Passing msg.payload into template node \<script\>

**URL:** <https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788>\
**Category:** General\
**Tags:** ui-template, uibuilder\
**Created:** [30 October 2024 11:54 UTC](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788 "2024-10-30T11:54:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 October 2024 11:54 UTC](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788/1 "2024-10-30T11:54:03Z")

</div>

I am trying to pass on the contents of a msg.payload to build a dynamic table and have done fair bit of research before posting this finally in despair.  
there are several threads on this in the forum , but i am unable to adapt any solution for my case, due to my limited or no knowledge of html/javascript.  
I also tried the no-code /low code solution of uibuilder and pestered many users but i could not get it to work.  
In the final attempt, I am here asking for a simple solution, where two of my sections are working, i just want to convert any one of them into executing a dynamic solution.

In the below flow,

1. ONOFF Table (Flow) is using flow.context and executing a table, but the number of rows are static. There are two separate data sets to just prove that the template node is reading flow.context and executing as per requirement **but is not dynamic in number of rows**.
2. ONOFF Table (array) is using array data within the template node (hard coded) and is working, the rows counts are dynamic, **but the data is static**.
3. the third one i am attempting to use scope. watch etc. .but not going anywhere. this node is abandoned and incorrectly setup.
4. I have included the flow with sample data (_they are in the change nodes_) if anyone is ready to help. (and am looking forward to, as if I continue on my own, my head is going to explode)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/8/689ed9abffb9e70bf77e93d0cbc9cd8b3322528c.png)

```auto
[{"id":"f1b687be593e0af4","type":"group","z":"3a20af9f0b232322","name":"","style":{"stroke":"#0070c0","fill":"#ffff7f","label":true,"color":"#001f60"},"nodes":["513e2c56d20e1ba9","45895bea0b5250ad","35a101f65656bd73","f4c73d7b2ab25e77","59f976f5b0017020","3b4b37ca3dae80e3","f5e11346630d19f1","47744976110a3809","ca790e475454ed18","b04aa79ad17dc65c","337a47a08d2f4aac","eb1f046a0b0e7e28","bbf83130807ac50f","047a71dcd5a71a2f","81165822cc122998"],"x":154,"y":1539,"w":892,"h":282},{"id":"513e2c56d20e1ba9","type":"template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"ONOFF TABLE (flow)","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<body>\n<div>\nTABLE-1\n</div> \n<table border = \"solid white 2 px\" border-collapse = \"separate\" cellpadding=\"1px\"> \n\n \n <tr><td colspan =\"100%\">THIS DATA IS GENERATED FROM FLOW CONTEXT</td></tr>\n <tr><td colspan =\"100%\">Flow context has 10 rows, but there are only 4 rows here because of hard coding</td></tr> \n \n \n <tr><td width= \"150px\"></td><td width= \"150px\"></td><td width= \"60px\"></td><td width= \"60px\"></td><td width= \"60px\"></td></tr>\n <tr bgcolor = 'blue'>\n <th>FROM TIME</th><th>TO TIME</th><th>DURATION</th><th>State</th><th>Machine</th></tr>\n\n <tr> <td>{{flow.one[0].FROM}}</td><td>{{flow.one[0].To}}</td><td>{{flow.one[0].DUR}}</td><td>{{flow.one[0].state}}</td><td>{{flow.one[0].mcn}}</td></tr>\n <tr> <td>{{flow.one[1].FROM}}</td><td>{{flow.one[1].To}}</td><td>{{flow.one[1].DUR}}</td><td>{{flow.one[1].state}}</td><td>{{flow.one[1].mcn}}</td></tr>\n <tr> <td>{{flow.one[2].FROM}}</td><td>{{flow.one[2].To}}</td><td>{{flow.one[2].DUR}}</td><td>{{flow.one[2].state}}</td><td>{{flow.one[2].mcn}}</td></tr>\n <tr> <td>{{flow.one[3].FROM}}</td><td>{{flow.one[3].To}}</td><td>{{flow.one[3].DUR}}</td><td>{{flow.one[3].state}}</td><td>{{flow.one[3].mcn}}</td></tr>\n\n</table>\n</body>","output":"str","x":760,"y":1620,"wires":[["45895bea0b5250ad","35a101f65656bd73"]]},{"id":"45895bea0b5250ad","type":"ui_template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","group":"986fd8031d6f53ed","name":"","order":10,"width":"20","height":"7","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":1620,"wires":[[]]},{"id":"35a101f65656bd73","type":"template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"ONOFF TABLE (array)","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\n\n<div>\n\tTABLE-2\n</div>\n\n<table border = \"solid white 1px\" border-collapse = \"collapse\" >\n \n\t<tr><td colspan =\"100%\">THIS DATA IS GENERATED FROM AN ARRAY HARDCODED INTO TEMPLATE NODE</td></tr>\n <tr><td colspan =\"100%\"></td></tr> \n\n\t<tr bgcolor = 'red'>\n <th>Machine</th>\n <th>Start-Time</th>\n <th>End-Time</th>\n <th>Duration</th>\n <th>Status</th>\n </tr>\n\n <tbody id=\"myTable\">\n \n </tbody>\n</table>\n\n\n<script>\n\t\nvar myArray = [\n\t{\"FROM\":\"2024-10-28 21:59\",\"To\":\"2024-10-28 22:22\",\"DUR\":23,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 22:22\",\"To\":\"2024-10-28 22:23\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 22:23\",\"To\":\"2024-10-28 22:52\",\"DUR\":29,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 22:52\",\"To\":\"2024-10-28 22:53\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 22:53\",\"To\":\"2024-10-28 23:38\",\"DUR\":85,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 23:38\",\"To\":\"2024-10-28 23:41\",\"DUR\":3,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 23:41\",\"To\":\"2024-10-28 23:42\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 23:42\",\"To\":\"2024-10-28 23:43\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 23:43\",\"To\":\"2024-10-28 23:45\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 23:45\",\"To\":\"2024-10-28 23:47\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 23:47\",\"To\":\"2024-10-29 01:37\",\"DUR\":7790,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-29 01:37\",\"To\":\"2024-10-29 01:47\",\"DUR\":10,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-29 01:47\",\"To\":\"2024-10-29 02:37\",\"DUR\":90,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-29 02:37\",\"To\":\"2024-10-29 02:48\",\"DUR\":11,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-29 02:48\",\"To\":\"2024-10-29 02:49\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"OFF\"}\n]\n\n\n\tbuildTable(myArray)\n\n\tfunction buildTable(data){\n\t\tvar table = document.getElementById('myTable')\n\n\t\tfor (var i = 0; i < data.length; i++){\n\t\t\tvar row = `<tr>\n\t\t\t\t\t\t\t<td>${data[i].mcn}</td>\n\t\t\t\t\t\t\t<td>${data[i].FROM}</td>\n\t\t\t\t\t\t\t<td>${data[i].To}</td>\n\t\t\t\t\t\t\t<td>${data[i].DUR}</td>\n\t\t\t\t\t\t\t<td>${data[i].state}</td>\n\t\t\t\t\t </tr>`\n\t\t\ttable.innerHTML += row\n\t\t}\n\t}\n\n</script>","output":"str","x":760,"y":1660,"wires":[["3b4b37ca3dae80e3"]]},{"id":"f4c73d7b2ab25e77","type":"inject","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":1620,"wires":[["59f976f5b0017020"]]},{"id":"59f976f5b0017020","type":"change","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"One data set","rules":[{"t":"set","p":"one","pt":"flow","to":"[{\"FROM\":\"2024-10-28 21:59\",\"To\":\"2024-10-28 22:22\",\"DUR\":23,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:22\",\"To\":\"2024-10-28 22:23\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:23\",\"To\":\"2024-10-28 22:52\",\"DUR\":29,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:52\",\"To\":\"2024-10-28 22:53\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:53\",\"To\":\"2024-10-28 23:38\",\"DUR\":85,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:38\",\"To\":\"2024-10-28 23:41\",\"DUR\":3,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:41\",\"To\":\"2024-10-28 23:42\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:42\",\"To\":\"2024-10-28 23:43\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:43\",\"To\":\"2024-10-28 23:45\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:45\",\"To\":\"2024-10-28 23:47\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"ON\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":1620,"wires":[["513e2c56d20e1ba9"]]},{"id":"3b4b37ca3dae80e3","type":"ui_template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","group":"7854688a9892977d","name":"","order":10,"width":"20","height":"7","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":1660,"wires":[[]]},{"id":"f5e11346630d19f1","type":"inject","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":1660,"wires":[["47744976110a3809"]]},{"id":"47744976110a3809","type":"change","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"Another data set","rules":[{"t":"set","p":"one","pt":"flow","to":"[{\"FROM\":\"2024-10-28 21:59\",\"To\":\"2024-10-28 22:25\",\"DUR\":26,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:25\",\"To\":\"2024-10-28 22:30\",\"DUR\":5,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:30\",\"To\":\"2024-10-28 23:19\",\"DUR\":89,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:19\",\"To\":\"2024-10-28 23:36\",\"DUR\":17,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:36\",\"To\":\"2024-10-28 23:42\",\"DUR\":6,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:42\",\"To\":\"2024-10-28 23:43\",\"DUR\":1,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:43\",\"To\":\"2024-10-28 23:45\",\"DUR\":2,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:45\",\"To\":\"2024-10-28 23:46\",\"DUR\":1,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:46\",\"To\":\"2024-10-28 23:47\",\"DUR\":1,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:47\",\"To\":\"2024-10-28 23:50\",\"DUR\":3,\"mcn\":\"m04\",\"state\":\"ON\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":1660,"wires":[["513e2c56d20e1ba9"]]},{"id":"ca790e475454ed18","type":"ui_button","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","group":"986fd8031d6f53ed","order":1,"width":"5","height":"1","passthru":false,"label":"Load Data Set One (m03)","tooltip":"","color":"black","bgcolor":"white","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":290,"y":1580,"wires":[["59f976f5b0017020"]]},{"id":"b04aa79ad17dc65c","type":"ui_button","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","group":"986fd8031d6f53ed","order":1,"width":"5","height":"1","passthru":false,"label":"Load Data Set Two (m04)","tooltip":"","color":"","bgcolor":"blue","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":290,"y":1700,"wires":[["47744976110a3809"]]},{"id":"337a47a08d2f4aac","type":"inject","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":1740,"wires":[["eb1f046a0b0e7e28"]]},{"id":"eb1f046a0b0e7e28","type":"change","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"data in payload","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"FROM\":\"2024-10-29 06:00\",\"To\":\"2024-10-29 07:57\",\"DUR\":157,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 07:57\",\"To\":\"2024-10-29 08:57\",\"DUR\":100,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 08:57\",\"To\":\"2024-10-29 09:02\",\"DUR\":45,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 09:02\",\"To\":\"2024-10-29 09:11\",\"DUR\":9,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 09:11\",\"To\":\"2024-10-29 09:12\",\"DUR\":1,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 09:12\",\"To\":\"2024-10-29 09:37\",\"DUR\":25,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 09:37\",\"To\":\"2024-10-29 09:48\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 09:48\",\"To\":\"2024-10-29 10:14\",\"DUR\":66,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 10:14\",\"To\":\"2024-10-29 10:16\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 10:16\",\"To\":\"2024-10-29 10:20\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 10:20\",\"To\":\"2024-10-29 10:21\",\"DUR\":1,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 10:21\",\"To\":\"2024-10-29 10:23\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 10:23\",\"To\":\"2024-10-29 10:27\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 10:27\",\"To\":\"2024-10-29 11:23\",\"DUR\":96,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:23\",\"To\":\"2024-10-29 11:25\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:25\",\"To\":\"2024-10-29 11:36\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:36\",\"To\":\"2024-10-29 11:37\",\"DUR\":1,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:37\",\"To\":\"2024-10-29 11:39\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:39\",\"To\":\"2024-10-29 11:43\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:43\",\"To\":\"2024-10-29 11:47\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:47\",\"To\":\"2024-10-29 11:51\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:51\",\"To\":\"2024-10-29 12:19\",\"DUR\":68,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 12:19\",\"To\":\"2024-10-29 12:30\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 12:30\",\"To\":\"2024-10-29 12:32\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 12:32\",\"To\":\"2024-10-29 12:34\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 12:34\",\"To\":\"2024-10-29 12:45\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"ON\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":1740,"wires":[["bbf83130807ac50f"]]},{"id":"bbf83130807ac50f","type":"template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"JUST A TRIAL - NOT WORKING ","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\n\n<div>\n\tTABLE-3\n</div>\n\n<table border = \"solid white 1px\" border-collapse = \"collapse\" >\n \n\t<tr><td colspan =\"100%\">TRYING HERE TO GENERATE DYNAMIC TABLE USING msg.payload INPUT</td></tr>\n <tr><td colspan =\"100%\"></td></tr> \n\n\t<tr bgcolor = 'green'>\n <th>Machine</th>\n <th>Start-Time</th>\n <th>End-Time</th>\n <th>Duration</th>\n <th>Status</th>\n </tr>\n\n <tbody id=\"myTable\">\n \n </tbody>\n</table>\n\n\n<script>\n\t\nvar myArray = [\n\n]\n\n\tbuildTable(myArray)\n\n\tfunction buildTable(data){\n\t\tvar table = document.getElementById('myTable')\n\n\t\tfor (var i = 0; i < data.length; i++){\n\t\t\tvar row = `<tr>\n\t\t\t\t\t\t\t<td>${data[i].mcn}</td>\n\t\t\t\t\t\t\t<td>${data[i].FROM}</td>\n\t\t\t\t\t\t\t<td>${data[i].To}</td>\n\t\t\t\t\t\t\t<td>${data[i].DUR}</td>\n\t\t\t\t\t\t\t<td>${data[i].state}</td>\n\t\t\t\t\t </tr>`\n\t\t\ttable.innerHTML += row\n\t\t}\n\t}\n\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg.payload) {\n items = msg.payload// example [{\"x\":67,\"y\":12},{\"x\":12,\"y\":30}]\n // Get the container element\n let container = document.getElementById('container');\n\n // Loop through the array and create divs\n items.forEach(item => {\n // Create a new div element\n let div = document.createElement('div');\n \n // Set the class of the div\n div.className = 'dot';\n \n // Set the position of the div\n div.style.left = `${item.x}px`;\n div.style.top = `${item.y}px`;\n \n // Append the div to the container\n container.appendChild(div);\n });\n }\n });\n })(scope);\n\n</script>","output":"str","x":750,"y":1740,"wires":[["047a71dcd5a71a2f"]]},{"id":"047a71dcd5a71a2f","type":"ui_template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","group":"3232542c7d0a8f20","name":"","order":10,"width":"20","height":"7","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":1740,"wires":[[]]},{"id":"81165822cc122998","type":"ui_button","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","group":"986fd8031d6f53ed","order":1,"width":"7","height":"1","passthru":false,"label":"Load Data into Table-3 (msg.payload)","tooltip":"","color":"","bgcolor":"green","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":1780,"wires":[["eb1f046a0b0e7e28"]]},{"id":"986fd8031d6f53ed","type":"ui_group","name":"Demo","tab":"6c38d6937a4ace93","order":1,"disp":false,"width":"20","collapse":false,"className":""},{"id":"7854688a9892977d","type":"ui_group","name":"Demo1","tab":"6c38d6937a4ace93","order":2,"disp":false,"width":"20","collapse":false,"className":""},{"id":"3232542c7d0a8f20","type":"ui_group","name":"Demo2","tab":"6c38d6937a4ace93","order":3,"disp":false,"width":"20","collapse":false,"className":""},{"id":"6c38d6937a4ace93","type":"ui_tab","name":"Demo","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [30 October 2024 13:04 UTC](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788/2 "2024-10-30T13:04:20Z")

</div>

Hi There,

I just noticed you're using ${...} in the template node:

```auto
`<tr>
							<td>${data[i].mcn}</td>
							<td>${data[i].FROM}</td>
							<td>${data[i].To}</td>
							<td>${data[i].DUR}</td>
							<td>${data[i].state}</td>
 </tr>`

```

that won't work. The template is using [mustache](https://en.wikipedia.org/wiki/Mustache_%28template_system%29) which doesn't allow Javascript code.

To include the payload in a template, just use `{{{ payload }}}` in the template - `{{{` three brackets means don't escape html code.

If you use `{{` two brackets, then HTML syntax will be escaped, e.g. `>` becomes `&gt;` and be displayed as `>` in the end result.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 October 2024 16:06 UTC](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788/3 "2024-10-30T16:06:59Z")

</div>

> [@gregorius](#):
>
> that won't work

this IS working. the code is within `<script></script>` tag in the template node.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d425c1a49a0d3ffda6f494a12b2c1df98523c696.png)

> [@smanjunath211](#):
>
> ONOFF Table (array) is using array data within the template node (hard coded) and is working, the rows counts are dynamic, **but the data is static**

The only trouble is the data coming into this function is from a static data within the template. I want the static data wihtin the template node script tag to read from a msg.payload input.

I know the answer is in this thread, but i cant get it to adapt to my situation.  
the example works for me, i just can't adapt to my requirement.

> [@How to pass msg.payload to \<script\>\</script\> in template node of node-red-dashboard 3.6.5?](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-script-script-in-template-node-of-node-red-dashboard-3-6-5/89255/7):
>
> You would use the second example in the side bar help for ui-template. You can then watch for incoming msg.payload. Example template. No html or body tags requiredd \<style\> .rectangle { position: relative; width: 1200px; height: 600px; background-color: lightgray; border: 1px solid #000; } .dot { position: absolute; width: 10px; height: 10px; background-color…

> [@Dashboard Template script with msg.payload](https://discourse.nodered.org/t/dashboard-template-script-with-msg-payload/9983/3):
>
> This has some worked examples:

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [31 October 2024 05:42 UTC](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788/4 "2024-10-31T05:42:42Z")

</div>

FINALLLYY!!

I got it.

![js](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d45216da71d3a08a6c93b8df300e1dee7d623f6b.gif)

```auto
[{"id":"51b9fd27d56a03e7","type":"inject","z":"3a20af9f0b232322","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"ttpp","payload":"[{\"FROM\":\"2024-10-28 21:59\",\"To\":\"2024-10-28 22:22\",\"DUR\":23,\"mcn\":\"m00\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:22\",\"To\":\"2024-10-28 22:23\",\"DUR\":1,\"mcn\":\"m01\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:23\",\"To\":\"2024-10-28 22:52\",\"DUR\":29,\"mcn\":\"m02\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:52\",\"To\":\"2024-10-28 22:53\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:53\",\"To\":\"2024-10-28 23:38\",\"DUR\":85,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:38\",\"To\":\"2024-10-28 23:41\",\"DUR\":3,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:41\",\"To\":\"2024-10-28 23:42\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:42\",\"To\":\"2024-10-28 23:43\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:43\",\"To\":\"2024-10-28 23:45\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:45\",\"To\":\"2024-10-28 23:47\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"ON\"}]","payloadType":"json","x":280,"y":2440,"wires":[["33c4e4ab36e1f0d8","9f46f315ad82a2bd"]]},{"id":"33c4e4ab36e1f0d8","type":"change","z":"3a20af9f0b232322","name":"data in payload","rules":[{"t":"set","p":"topic","pt":"msg","to":"This is the topic","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":2440,"wires":[["cf9dfd82a71cb956"]]},{"id":"cf9dfd82a71cb956","type":"json","z":"3a20af9f0b232322","name":"","property":"payload","action":"","pretty":false,"x":620,"y":2440,"wires":[["0571fb3490350b31"]]},{"id":"0571fb3490350b31","type":"template","z":"3a20af9f0b232322","name":"ONOFF TABLE (dynamic array)","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\n\n<div>\n\tTABLE-2\n</div>\n\n<table border = \"solid white 1px\" border-collapse = \"collapse\" >\n \n\t<tr><td colspan =\"100%\">THIS DATA IS GENERATED FROM AN ARRAY HARDCODED INTO TEMPLATE NODE</td></tr>\n <tr><td colspan =\"100%\"></td></tr> \n\n\t<tr bgcolor = 'red'>\n <th>Machine</th>\n <th>Start-Time</th>\n <th>End-Time</th>\n <th>Duration</th>\n <th>Status</th>\n </tr>\n\n <tbody id=\"myTable\">\n \n </tbody>\n</table>\n\n\n<script>\n\t\nvar myArray = {{{payload}}}\n\n\n\tbuildTable(myArray)\n\n\tfunction buildTable(data){\n\t\tvar table = document.getElementById('myTable')\n\n\t\tfor (var i = 0; i < data.length; i++){\n\t\t\tvar row = `<tr>\n\t\t\t\t\t\t\t<td>${data[i].mcn}</td>\n\t\t\t\t\t\t\t<td>${data[i].FROM}</td>\n\t\t\t\t\t\t\t<td>${data[i].To}</td>\n\t\t\t\t\t\t\t<td>${data[i].DUR}</td>\n\t\t\t\t\t\t\t<td>${data[i].state}</td>\n\t\t\t\t\t </tr>`\n\t\t\ttable.innerHTML += row\n\t\t}\n\t}\n\n</script>","output":"str","x":840,"y":2440,"wires":[["937d37fbc75541b3","37c92c76d05fe2ed"]]},{"id":"937d37fbc75541b3","type":"ui_template","z":"3a20af9f0b232322","group":"9058f7c982a1dcc7","name":"","order":10,"width":"20","height":"20","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1070,"y":2440,"wires":[[]]},{"id":"9058f7c982a1dcc7","type":"ui_group","name":"Demo3","tab":"6c38d6937a4ace93","order":4,"disp":false,"width":"20","collapse":false,"className":""},{"id":"6c38d6937a4ace93","type":"ui_tab","name":"Demo","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<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:** [14 November 2024 05:43 UTC](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788/5 "2024-11-14T05:43:20Z")

</div>

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