Display Array in Table, duplicate elements

Dashboard
1

Hi,

Very new to Node Red (Thank you!) and using my Javascript knowledge of many years ago, so please bear with me.

I have found a problem when trying to display a table of an array in Dashboard. It seems that if there is a duplicate item in the array, the table is not displayed. Change the duplicate to a unique value and all appears OK.

Having tried two examples from the flows pages, I wonder what I am doing wrong.

Any help greatly appreciated.

[{"id":"f653c442.6e2ce","type":"inject","z":"39d52aab.4f2c8e","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":110,"y":140,"wires":[["d04ea5af.07eba"]]},{"id":"d04ea5af.07eba","type":"function","z":"39d52aab.4f2c8e","name":"build array (1)","func":"var arr =[1,1,3];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":140,"wires":[["f921f131.8d9528"]]},{"id":"f921f131.8d9528","type":"ui_template","z":"39d52aab.4f2c8e","group":"cbc0de8.b85f1a","name":"One dimension array table (temperature)","order":1,"width":"6","height":"26","format":"<table id=\"table\" border=\"1\">\n <tr>\n <th>Temperature</th> \n </tr>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\">\n <td>{{row}}</td>\n </tr>\n </tbody>\n</table>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":1020,"y":160,"wires":[["622d332d.5995f4"]]},{"id":"622d332d.5995f4","type":"debug","z":"39d52aab.4f2c8e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1190,"y":260,"wires":[]},{"id":"62e88f0d.d2074","type":"inject","z":"39d52aab.4f2c8e","name":"Array of low-letter messages","topic":"","payload":"[\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\"]","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":180,"y":220,"wires":[["80de0a82.f2df1"]]},{"id":"80de0a82.f2df1","type":"json","z":"39d52aab.4f2c8e","name":"","property":"payload","action":"","pretty":false,"x":397.8333053588867,"y":219.27775478363037,"wires":[["ac361aa.2d46868"]]},{"id":"4b6719a.454c4e8","type":"function","z":"39d52aab.4f2c8e","name":"manipulate each element","func":"msg.payload = msg.payload.toUpperCase();\nreturn msg;","outputs":1,"noerr":0,"x":205.6111068725586,"y":422.6111001968384,"wires":[["392b5ef8.b60f82"]]},{"id":"392b5ef8.b60f82","type":"function","z":"39d52aab.4f2c8e","name":"reconstruct array","func":"var mapResult = msg.mapResult();\nmapResult.result[msg.index] = msg.payload;\nmapResult.countdown -= 1;\nif (0 === mapResult.countdown) {\n return {\n payload: mapResult.result\n };\n}\n","outputs":1,"noerr":0,"x":431.1666488647461,"y":422.61109828948975,"wires":[["f921f131.8d9528"]]},{"id":"ac361aa.2d46868","type":"function","z":"39d52aab.4f2c8e","name":"split elements","func":"var mapResult = {\n countdown: msg.payload.length,\n result: msg.payload.map(function(){})\n};\nreturn [msg.payload.map(function(element, index) {\n return {\n payload: element,\n index: index,\n mapResult: function() {\n return mapResult;\n }\n };\n})];\n","outputs":1,"noerr":0,"x":581,"y":219.27775478363037,"wires":[["4b6719a.454c4e8"]]},{"id":"cbc0de8.b85f1a","type":"ui_group","z":"","name":"One dimension Array","tab":"fca4362f.d5b2a","order":1,"disp":true,"width":"6","collapse":false},{"id":"fca4362f.d5b2a","type":"ui_tab","z":"","name":"Table Examples","icon":"dashboard","order":1}]

2

Try running your flow with a duplicate entry but do it in chrome and view the javaScript console. Do you see any errors?

3

Thank you for your help zenofmud.

BTW Running this on up to date Ubuntu 18.04.
Node Red: 0.19.5

From Chrome Console

localhost/:1 Application Cache Checking event
localhost/:1 Application Cache NoUpdate event
app.min.js:499 Rendered http://localhost:1880/ui/css/app.min.less successfully.
app.min.js:499 CSS for http://localhost:1880/ui/css/app.min.less generated in 116ms
app.min.js:499 Less has finished. CSS generated in 116ms
app.min.js:140 You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material!
(anonymous) @ app.min.js:140
app.min.js:140 SideNav 'left' is not available! Did you use md-component-id='left'?
(anonymous) @ app.min.js:140
app.min.js:499 Rendered http://localhost:1880/ui/css/app.min.less successfully.
app.min.js:499 CSS for http://localhost:1880/ui/css/app.min.less generated in 50ms
app.min.js:499 Less has finished. CSS generated in 50ms
app.min.js:140 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=row%20in%20msg.payload&p1=number%3A1&p2=1
    at app.min.js:27
    at app.min.js:329
    at app.min.js:164
    at m.$digest (app.min.js:165)
    at m.$apply (app.min.js:168)
    at app.min.js:181
    at f (app.min.js:66)
    at app.min.js:69
(anonymous) @ app.min.js:140```
4

So it is showing an error, and if you look, the error shows an address. What do you find if you go to that address?

5

Thank you!

Learnt a method of diagnosis and in the process 'fixed' my non-problem. Excellent.

The AngularJS link is worth following! I simply had to 'track by $index' at the ng-repeat instruction.

Love this Programming Tool!!