Hello everyone;
I need to know how to convert csv to html table but csv content is dynamic.. any help would be appreciated
Hello Gaveriel,
You have a better chance someone helping if you provide some sample data from your csv along with its title headers.
When you say "dynamic" .. you mean new records (rows) are added to the end of the csv ?
or do the columns of the csv change?
Also the source of the csv is from a file on disk ?
1 Like
examples
using template and mustache syntax
[{"id":"20f0b5ef.950352","type":"template","z":"57675e72.26a0d8","name":"simulate text csv","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"tom,tit,24\nbilly,blue,55\nlucy,lu,18\n","output":"str","x":320,"y":2880,"wires":[["507b0ad9.67e8dc"]]},{"id":"32e1c2c0.dfe546","type":"inject","z":"57675e72.26a0d8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":90,"y":2880,"wires":[["20f0b5ef.950352"]]},{"id":"507b0ad9.67e8dc","type":"csv","z":"57675e72.26a0d8","name":"","sep":",","hdrin":"","hdrout":"none","multi":"mult","ret":"\\n","temp":"firstname,lastname,age","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":190,"y":2840,"wires":[["3955f650.c6da42"]]},{"id":"3955f650.c6da42","type":"template","z":"57675e72.26a0d8","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table style=\"width:100%\">\n <tr>\n <th>Firstname</th>\n <th>Lastname</th>\n <th>Age</th>\n </tr>\n {{#payload}}\n <tr>\n <tr>{{firstname}}</tr>\n <tr>{{lastname}}</tr>\n <thr{{age}}</tr>\n </tr>\n {{/payload}}\n </table>","output":"str","x":340,"y":2840,"wires":[["7fe08578.addb84","9f9d6b2.e803818"]]},{"id":"9f9d6b2.e803818","type":"ui_template","z":"57675e72.26a0d8","group":"8b5cde76.edd58","name":"template table","order":1,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":582.3333129882812,"y":2866.666748046875,"wires":[[]]},{"id":"7fe08578.addb84","type":"debug","z":"57675e72.26a0d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"name","statusType":"msg","x":610,"y":2800,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","z":"","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"6","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
using function node and truly dynamic
[{"id":"3683d08.7313f3","type":"inject","z":"57675e72.26a0d8","name":"3 x 3 csv","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":70,"y":3020,"wires":[["a798095e.61b168"]]},{"id":"a798095e.61b168","type":"template","z":"57675e72.26a0d8","name":"simulate text csv","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Firstname,Lastname,age\ntom,tit,24\nbilly,blue,55\nlucy,lu,18\n","output":"str","x":240,"y":3020,"wires":[["6c20ed1a.5d415c"]]},{"id":"6c20ed1a.5d415c","type":"csv","z":"57675e72.26a0d8","name":"","sep":",","hdrin":true,"hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":250,"y":3060,"wires":[["89bab695.cdd048"]]},{"id":"89bab695.cdd048","type":"function","z":"57675e72.26a0d8","name":"","func":"var html = '<table style=\"width:100%\"><tr>';\nObject.keys(msg.payload[0]).forEach((part) => {\n html += '<th>'+part+'</th>'\n})\nhtml += '</tr>';\nmsg.payload.forEach((part) => {\n html += '<tr>';\n Object.values(part).forEach((bits) => {\n html += '<td>'+bits+'</td>'\n })\n html+= '</tr>';\n})\nmsg.payload = html+'</table';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":3060,"wires":[["dc879725.5e20d","6e976e15.e9654"]]},{"id":"f0c5d2e9.7f1fa","type":"template","z":"57675e72.26a0d8","name":"simulate text csv","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Firstname,Lastname,age,hair,eyes\ntom,tit,24,red,brown\nbilly,blue,55,brown,blue\nlucy,lu,18,blonde,green\n","output":"str","x":260,"y":3120,"wires":[["6c20ed1a.5d415c"]]},{"id":"dc879725.5e20d","type":"ui_template","z":"57675e72.26a0d8","group":"8b5cde76.edd58","name":"dynamic table","order":1,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":610,"y":3060,"wires":[[]]},{"id":"6e976e15.e9654","type":"debug","z":"57675e72.26a0d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":640,"y":3000,"wires":[]},{"id":"2f345edb.93c6ca","type":"inject","z":"57675e72.26a0d8","name":"5 x 3 csv","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":90,"y":3120,"wires":[["f0c5d2e9.7f1fa"]]},{"id":"8b5cde76.edd58","type":"ui_group","z":"","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"6","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
Hi @UnborN ..thank you
I mean I need a function that is flexible with whatever CSV data I choose...
the source of the csv is actually from a database ..it's as a format of arrays of objects then I convert it to CSV format so I can handle it easily and display it as HTML table
Hi @E1cid ..thanks for ur replay
I tried the second one and I got this error
"TypeError: msg.payload.forEach is not a function"
Where are you converting database data to CSV? It's completely unnecessary. You should just take the output from the database and use that to build a table. It might even be possible to send the array from the database directly to ui-table node with zero processing.
That means that the shared code (that I've not looked at) is expecting msg.payload to be an array. I would guess that your payload is an Object.
Add a debug before the node in error to see what input you are really feeding it.
Hi @Steve-Mcl ;
I don't want to use the ui-table node because I want to send a result table in the email node ..I receive a data ( [object Object] : msg.payload : array[24] ) and I want it to display it as a table then send that table in email node
hello @TotallyInformation ;
this is the output I get
:
You should be able to feed that array straight into the function node from my second example, and it will output a html table.
1 Like
yes it works ,@E1cid ..Thank you so much
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
