# How set the output variable "{{msg.payload}}" in JS?!

**URL:** <https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657>\
**Category:** General\
**Created:** [7 June 2018 09:41 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657 "2018-06-07T09:41:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [7 June 2018 09:41 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/1 "2018-06-07T09:41:32Z")

</div>

that's my flow.  
 ![1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/b2a6c7059d6129eaaab843e278824f6539fa1ac3.png)  
my function return a array 2D  
 ![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/23b30b5b897818d429942f25d590f8328c8bd1ab.png)  
ad you see in my debug i can to show it.  
 ![3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/0df51bdd8880e02a177edf9cf721203d91f95736.png)  
but i can't set the variable in script js!!??  
 ![4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/0f506647efbb494f199728f8dbbc2c1339913a93.png)  
 ![5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/079e9442bc87c75855688c8cead421a95fdad42e.png)  
How i can do that????!!!  
Thank you fooor your hellp !!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 June 2018 09:56 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/2 "2018-06-07T09:56:50Z")

</div>

Try this for the code in your template:

````auto
<table id="table" border="1">
     <tr>
        <th>First Name</th> 
        <th>Last Name</th>
        <th>Age</th>
 </tr>
 <tbody>
 <tr ng-repeat="row in msg.payload" ng-dblclick="sendRow(row)">
   <td ng-repeat="item in row" class="numeric" bgcolor=gray>{{item}}</td>
 <td>
 </tr>
 </tbody>
</table>```
````

---

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [7 June 2018 10:06 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/3 "2018-06-07T10:06:42Z")

</div>

it’s works thank you very much,  
but why we can’ts et the node-red variable in JS ??!!!  
Thank you.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 June 2018 10:11 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/4 "2018-06-07T10:11:12Z")

</div>

You are dealing with angular.js in the template and you have to play by those rules (and I’m just learning them myself)

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [7 June 2018 14:11 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/5 "2018-06-07T14:11:26Z")

</div>

When you are writing Angular/Html code inside a `ui_template` node, the mustache syntax `{{payload}}` is not available – that is a feature of certain nodes like `template`, good for building strings of static text with embedded variables, such as when composing the body of an email.

---

<div class="post-metadata">

**Author:** ![Alexwuhamilton](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@Alexwuhamilton](https://discourse.nodered.org/u/Alexwuhamilton)\
**Post date:** [7 June 2018 14:40 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/6 "2018-06-07T14:40:35Z")

</div>

Hello! if I am getting stream of array from MQTT node, how could I put them in a table?  
I don't know much about angular.JS ( start looking it now).  
Thanks

[{"id":"e80282f6.c0116","type":"mqtt in","z":"2ce1fffe.a59ac","name":"WheelLoad","topic":"d/mes\_whload/json","qos":"2","broker":"d2ce4d1a.6fdee","x":95.00004577636719,"y":97.00000762939453,"wires":[["1a0c2e76.fce2a2"]]},{"id":"415d48cb.028918","type":"debug","z":"2ce1fffe.a59ac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":753.0000114440918,"y":80.99999046325684,"wires":},{"id":"1a0c2e76.fce2a2","type":"function","z":"2ce1fffe.a59ac","name":"array building","func":"var obj = JSON.parse(msg.payload);\nvar arr = Array.from(Object.keys(obj),k=\>obj[k]);\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":300.89453506469727,"y":93.38281440734863,"wires":[["53525739.5c3138"]]},{"id":"53525739.5c3138","type":"ui\_template","z":"2ce1fffe.a59ac","group":"61e9066.3640df8","name":"WHEEL LOAD","order":0,"width":0,"height":0,"format":"\n\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n\n\n\<table cellpadding="1" border="1" id="table1" class="table-hover" style="width: 100%;"\>\n \n\n \n prd\_dt1 \n prd\_dt2\n Prd\_dt3\n Seq\_No\n Ass\_cd\n brd\_cd\n air\_pr\n val-cd\n spr\_fg\n ins\_ct\n sum\_ct\n ass\_ma\n whe\_na\n Tir\_na\n prd\_md\n get\_tm\n \n \n \n\n\n\n\n \n

\n \<tr ng-repeat="row in msg.payload" ng-dblclick="sendRow(row)"\>\n \<td class="numeric" bgcolor=gray\>{{row.value1}}\n \<td contenteditable="true"\>{{row.value2}}\n \<td contenteditable="true"\>{{row.value3}}\n \<td contenteditable="true"\>{{row.value4}}\n \<td contenteditable="true"\>{{row.value5}}\n {{row.value7}}\n \<td contenteditable="true"\>{{row.value8}}\n {{row.value9}}\n {{row.value10}}\n \<td contenteditable="true"\>{{row.value11}}\n {{row.value12}}\n {{row.value13}}\n \<td contenteditable="true"\>{{row.value14}}\n \<td contenteditable="true"\>{{row.value15}}\n \n\n \<md-button ng-click="sendRow(row)"\>Save\n \n \n\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":519.8945960998535,"y":81.44922828674316,"wires":[["415d48cb.028918"]]},{"id":"d2ce4d1a.6fdee","type":"mqtt-broker","z":"","name":"MACWest-1","broker":"172.16.5.7","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"61e9066.3640df8","type":"ui\_group","z":"","name":"WHEEL LOAD","tab":"bd75c8a6.4878e8","disp":true,"width":"6","collapse":false},{"id":"bd75c8a6.4878e8","type":"ui\_tab","z":"","name":"DISPLAY ","icon":"dashboard"}]

 ![Capture0607](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/846b402acdd2b3a13d307eb2c0e9de2bc5383846.JPG)

---

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [7 June 2018 15:12 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/7 "2018-06-07T15:12:09Z")

</div>

try the solution of ZENOFMUD, it work good for me.

> [@How set the output variable "{{msg.payload}}" in JS?!](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/2):
>
> Try this for the code in your template: \<table id="table" border="1"\> \<tr\> \<th\>First Name\</th\> \<th\>Last Name\</th\> \<th\>Age\</th\> \</tr\> \<tbody\> \<tr ng-repeat="row in msg.payload" ng-dblclick="sendRow(row)"\> \<td ng-repeat="item in row" class="numeric" bgcolor=gray\>{{item}}\</td\> \<td\> \</tr\> \</tbody\> \</table\>```

---

<div class="post-metadata">

**Author:** ![Alexwuhamilton](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@Alexwuhamilton](https://discourse.nodered.org/u/Alexwuhamilton)\
**Post date:** [7 June 2018 15:18 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/8 "2018-06-07T15:18:33Z")

</div>

Thanks, Man  
I tried, it doesn't seem work.  
in the debug windows, I am getting stream of array. how ever it wouldn't display on the table page.

 ![Capture2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/46f17f03d82826458366083e7f9072ded7c9eea1.JPG)

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [7 June 2018 16:18 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/9 "2018-06-07T16:18:21Z")

</div>

If you can copy/paste your `ui_template` code – then maybe we can offer some assistance…

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [7 June 2018 16:50 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/12 "2018-06-07T16:50:23Z")

</div>

Anytime you need to post a chunk of code or formatted text, put a line before and after it that contains only 3 backtics – that will keep it from escaping your quotes and such.

You can try it out by editing the last post… just open your `ui_template` node, select all the code inside the edit panel, and paste it between the backtic lines.

Please see [this post](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) for more information on how to effectively post here

---

<div class="post-metadata">

**Author:** ![Alexwuhamilton](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@Alexwuhamilton](https://discourse.nodered.org/u/Alexwuhamilton)\
**Post date:** [7 June 2018 16:56 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/14 "2018-06-07T16:56:04Z")

</div>

```auto
<table id="table" border="1">
     <tr>
        <th>prd_dt1</th> 
        <th>prd_dt2</th>
        <th>Prd_dt3</th>
        <th>Seq_No</th>
        <th>Ass_cd</th>
        <th>brd_cd</th>
        <th>air_pr</th>
        <th>val-cd</th>
        <th>spr_fg</th>
        <th>ins_ct</th>
        <th>sum_ct</th>
        <th>ass_ma</th>
        <th>whe_na</th>
        <th>Tir_na</th>
        <th>prd_md</th>
        <th>get_tm</th>
        </tr>
 <tbody>
 <tr ng-repeat="row in msg.payload" ng-dblclick="sendRow(row)">
   <td ng-repeat="item in row" class="numeric" bgcolor=gray>{{item}}</td>
 <td>
 </tr>
 </tbody>
</table>
<script>
(function($scope) {
 $scope.sendRow = function(obj) {
 //$scope.send({ "payload": obj });
 $scope.send({ "payload": (document.getElementById("table").rows[0].innerText) });
 $scope.send({ "payload": (document.getElementById("table").rows[1].innerText) });
 };
})(scope);
</script>

```

sorry for the last attempt…

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [7 June 2018 17:18 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/15 "2018-06-07T17:18:51Z")

</div>

Feel free to remove any of those failed posts – it will help others find solutions more easily.

Your `ui_template` uses two nested `ng-repeat` directives… the first to add rows to the table, and the second to add cells to each row. However, your `msg.payload` shown above is a one-dimensional array of 16 values, representing a single row. In order for this template to work, you will need to wrap your array in another array, containing this one array.

Are you planning on displaying more than one row of data? If so, what are you going to use to “aggregate” the rows into an array of arrays? I’m asking because the dashboard nodes will not do that for you automatically.

---

<div class="post-metadata">

**Author:** ![Alexwuhamilton](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@Alexwuhamilton](https://discourse.nodered.org/u/Alexwuhamilton)\
**Post date:** [7 June 2018 17:54 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/16 "2018-06-07T17:54:41Z")

</div>

yes, I am planning to display certain rows of data, let’s see 25 for the page.  
the array is updating every 30 seconds or so.  
ideally the result would be FIFO the data, the latest data will push out the previous data.  
currently I am attempting to display it first.  
Thanks

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 June 2018 18:07 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/17 "2018-06-07T18:07:23Z")

</div>

How many columns of data per row?

---

<div class="post-metadata">

**Author:** ![Alexwuhamilton](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@Alexwuhamilton](https://discourse.nodered.org/u/Alexwuhamilton)\
**Post date:** [7 June 2018 18:59 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/18 "2018-06-07T18:59:14Z")

</div>

the array has 16 columns

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 June 2018 19:43 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/19 "2018-06-07T19:43:29Z")

</div>

So If I understand, you will be sending one row of sixteen columns, but you want to have 25 occurances of that row show up and each new row be at the top of the ‘table’ and oldest one to disappear.

Is that right?

---

<div class="post-metadata">

**Author:** ![Alexwuhamilton](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@Alexwuhamilton](https://discourse.nodered.org/u/Alexwuhamilton)\
**Post date:** [7 June 2018 20:00 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/20 "2018-06-07T20:00:08Z")

</div>

Yes that is right

Thanks

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 June 2018 21:53 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/21 "2018-06-07T21:53:34Z")

</div>

I would build a flow variable that held the array and have a function that would push the newest entry’s into the array and remove the oldest one ( if the array has more than 25 entries) then send the entire array to the template.

If I have time, I’ll see if I can write up an example

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 June 2018 23:33 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/22 "2018-06-07T23:33:32Z")

</div>

Ok, here is an example flow with a function that picks a random company name (out of a list) and a random number for the Stock price. It puts them in a flow variable and limits the number to 10 entries. Updates happen every 3 seconds.

It then sends the array to the template node and you can watch the new entry appear at the top of the list and the 10 entry gets pushed off the bottom. this should give you an idea of what you have to do.

`[{"id":"9ea1913.9974bf","type":"inject","z":"968ca76f.3dc46","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"3","crontab":"","once":true,"onceDelay":"","x":90,"y":280,"wires":[["f56e7bfc.ca7fa"]]},{"id":"f56e7bfc.ca7fa","type":"function","z":"968ca76f.3dc46","name":"build array (2) random","func":"var x = [];\nvar companyStock = flow.get(\"companyData\") || x;\nvar arrayCompany = [\"Apple\",\"AT&T\",\"Berkshire Hathaway\",\"BP\",\"China National Petroleum\",\"CVS Health\",\"Daimler\",\"Exor\",\"Exxon Mobil\",\"General Motors\",\"Glencore\",\"McKesson\",\"Royal Dutch Shell\",\"Samsung Electronics\",\"Sinopec Group\",\"State Grid\",\"Toyota\",\"United Health\",\"Volkswagen Group\",\"Walmart\"];\nvar ixCompany = Math.floor(Math.random() * (20));\nvar stockPrice = Math.floor(Math.random() * (1000))/10;\nvar latest = [arrayCompany[ixCompany], stockPrice];\ncompanyStock.unshift(latest);\nif (companyStock.length > 10) {companyStock.pop();}\nflow.set(\"companyData\",companyStock);\nmsg.payload = companyStock;\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":280,"wires":[["6c5af6fb.7c03d8"]]},{"id":"62fa919c.32ffc","type":"debug","z":"968ca76f.3dc46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":770,"y":280,"wires":[]},{"id":"6c5af6fb.7c03d8","type":"ui_template","z":"968ca76f.3dc46","group":"afe1abd8.451f38","name":"Two dimension array table","order":1,"width":"12","height":"10","format":"\n<table id=\"table\" border=\"1\">\n <tr>\n <th>Company</th> \n <th>Latest Price</th>\n </tr>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\">\n <td ng-repeat=\"item in row\" >{{item}}</td>\n </tr>\n </tbody>\n</table>\n\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":540,"y":280,"wires":[["62fa919c.32ffc"]]},{"id":"afe1abd8.451f38","type":"ui_group","z":"","name":"Column 2","tab":"5b3bb364.7ec764","order":2,"disp":false,"width":"12","collapse":false},{"id":"5b3bb364.7ec764","type":"ui_tab","z":"","name":"Feeder test","icon":"dashboard"}]`

---

<div class="post-metadata">

**Author:** ![Alexwuhamilton](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@Alexwuhamilton](https://discourse.nodered.org/u/Alexwuhamilton)\
**Post date:** [8 June 2018 16:23 UTC](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657/23 "2018-06-08T16:23:46Z")

</div>

Zenofmud  
Thanks! I will study it and work something out.

[Next page](https://discourse.nodered.org/t/how-set-the-output-variable-msg-payload-in-js/657.md?page=2)