that's my flow.
my function return a array 2D
ad you see in my debug i can to show it.
but i can't set the variable in script js!!??
How i can do that????!!!
Thank you fooor your hellp !!
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>```
1 Like
it’s works thank you very much,
but why we can’ts et the node-red variable in JS ??!!!
Thank you.
You are dealing with angular.js in the template and you have to play by those rules (and I’m just learning them myself)
1 Like
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.
1 Like
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 \n \n \n\n\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
try the solution of ZENOFMUD, it work good for me.
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.
1 Like
If you can copy/paste your ui_template code – then maybe we can offer some assistance…
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 for more information on how to effectively post here
<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…
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.
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
How many columns of data per row?
the array has 16 columns
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?
Yes that is right
Thanks
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
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"}]
1 Like
Zenofmud
Thanks! I will study it and work something out.
