\
**Category:** General\
**Created:** [22 October 2021 15:16 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580 "2021-10-22T15:16:58Z")\
**Posts on this page:** 11\
**Page:** 1
**Author:**  [@Miliks](https://discourse.nodered.org/u/Miliks)\
**Post date:** [22 October 2021 15:16 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/1 "2021-10-22T15:16:58Z")
i'd like to create a HTML page using the data coming from csv. Some data come to "header", some should go as a table data.
I manged to visualize a complete csv using the tabliefy and template node. But can't a way to parse first a csv and then use a JSON object I get to create a table using a template node.
csv is like this:
`
| Data | Modello | Cod. Risultato | Descrizione risultato | Peaks | Thickness | Att | Gain | CatNo | CenterPeacks | Result | SpotID | TestID |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 18/12/2018 09:01 | M161 | 0 | Buono | 2 | 3,39 | 3,25 | 38 | WP0806 Q+ | 0 | 1 | 12061 | 7799 |
| 18/12/2018 09:01 | M161 | 0 | Buono | 2 | 3,33 | 2,52 | 35 | WP0807 Q+ | 0 | 1 | 12062 | 7799 |
| 18/12/2018 09:01 | M161 | 0 | Buono | 2 | 3,28 | 4 | 35 | WP0808 Q+ | 0 | 1 | 12063 | 7799 |
`
and i need to get the Data and Modello to the header, I used the flow variable to get them from csv. After that i create a JSON object for the rest of the field i need. But can't find a way how to put these data into html template.
here is my flow:
`[{"id":"7c2582a1.e3912c","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"6722c10c.732b48","type":"inject","z":"7c2582a1.e3912c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":120,"wires":[["db01ad75.187108"]]},{"id":"db01ad75.187108","type":"file in","z":"7c2582a1.e3912c","name":"","filename":"/home/ros_test/ADDSRL-PC_T1_07-10-2019.csv","format":"utf8","chunk":false,"sendError":false,"encoding":"none","x":440,"y":120,"wires":[["f8e61f6d.6b99f"]]},{"id":"f8e61f6d.6b99f","type":"csv","z":"7c2582a1.e3912c","name":"","sep":"\\t","hdrin":true,"hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":730,"y":120,"wires":[["d5bcd946.d1ae2"]]},{"id":"d5bcd946.d1ae2","type":"function","z":"7c2582a1.e3912c","name":"","func":"var data = msg.payload;\nvar jsonObj = {};\nflow.set('date',data[0].Data);\nflow.set('modello',data[0].Modello);\nfor (let index = 0; index < 5; index++) {\n jsonObj.CodRes = data[index][\"Cod. Risultato\"];\n jsonObj.Peaks = data[index].Peaks;\n jsonObj.DesrRes = data[index][\"Descrizione risultato\"];\n jsonObj.thickness = data[index].Thickness;\n jsonObj.att = data[index].Att;\n jsonObj.gain = data[index].Gain;\n jsonObj.catNo = data[index].CatNo;\n jsonObj.centPeak = data[index].CenterPeacks;\n jsonObj.result = data[index].Result;\n jsonObj.spotID = data[index].SpotID;\n jsonObj.testID = data[index].TestID;\n console.log(\"element = \" + JSON.stringify(jsonObj))\n \n}\nmsg.payload = jsonObj;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":880,"y":120,"wires":[["cfb273d7.f1fe88"]]},{"id":"cfb273d7.f1fe88","type":"template","z":"7c2582a1.e3912c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n \n \n \n TEST\n \n\n\n Welding Quality data
\n\n\n \n \n | Operatore: | \n Primary Account | \n Modello: | \n {{flow.\"modello\"}} | \n Disegno: | \n | \n Provati: | \n 60/60 | \n
\n \n \n \n \n | Data: | \n {{flow.\"date\"}} | \n \n
\n
\n \n \n \n\n ","output":"str","x":1060,"y":120,"wires":[["dae4e870.dc5e3"]]},{"id":"dae4e870.dc5e3","type":"ui_template","z":"7c2582a1.e3912c","group":"8b5cde76.edd58","name":"template table","order":1,"width":"12","height":"18","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1260,"y":120,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"30bf4544.04a522","order":1,"disp":true,"width":"12","collapse":false},{"id":"30bf4544.04a522","type":"ui_tab","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]`Processing: ADDSRL-PC\_T1\_07-10-2019 - Copy.csv...
[ADDSRL-PC\_T1\_07-10-2019.txt](https://discourse.nodered.org/uploads/short-url/4BaOGGCb1laNcsMZAHL8nA2uVvL.txt) (944 Bytes)
---
**Author:**  [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [22 October 2021 16:04 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/2 "2021-10-22T16:04:01Z")
Without the original csv data its impossible to replicate this.
Can you upload  the file ?
(rename your .csv to .txt so the forum will allow you to post it)
---
**Author:**  [@Miliks](https://discourse.nodered.org/u/Miliks)\
**Post date:** [22 October 2021 16:08 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/3 "2021-10-22T16:08:20Z")
i've uploaded the example, but the extension is txt, hope this is enaught.
i can see another problem in my script. The JSON object at the end contain only last elaborated line. Can't figure out why.
---
**Author:**  [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 October 2021 16:27 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/4 "2021-10-22T16:27:45Z")
here is an example the `cod.`in the header row gives issues so i added new names in csv node to remove the `.`
the template is an example and you will have to finish it
```auto
[{"id":"55fa8af6.3485a4","type":"inject","z":"b779de97.b1b46","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":4880,"wires":[["6c47b762.622d38"]]},{"id":"6c47b762.622d38","type":"template","z":"b779de97.b1b46","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"Data\tModello\tCod. Risultato\tDescrizione risultato\tPeaks\tThickness\tAtt\tGain\tCatNo\tCenterPeacks\tResult\tSpotID\tTestID\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t2\t3,39\t3,25\t38\tWP0806 Q+\t0\t1\t12061\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t2\t3,33\t2,52\t35\tWP0807 Q+\t0\t1\t12062\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t2\t3,28\t4\t35\tWP0808 Q+\t0\t1\t12063\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t3\t2,95\t2,33\t32\tWP0809 Q+\t0\t1\t12064\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t2\t3,42\t3,45\t32\tWP0810 Q+\t0\t1\t12065\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t1\tBruciato\t1\t5,56\t-1\t35\tWP0811 Q+\t0\t2\t12066\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t3\tSottile\t2\t3,63\t3,3\t37\tWP0812 Q+\t0\t2\t12067\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t3\t2,08\t3,07\t37\tWP0509\t0\t1\t12060\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t3\t2,25\t2,09\t37\tWP0508\t0\t1\t12143\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t0\tBuono\t3\t2,22\t3,22\t37\tWP0505\t0\t1\t12140\t7799\t\t\t\t\n18/12/2018 09:01\tM161\t10\tDifetto Interno\t1\t5,18\t-1\t41\tWP0813 Q+\t1\t2\t12068\t7799\t","output":"str","x":420,"y":4880,"wires":[["989f5825.95fcf8"]]},{"id":"989f5825.95fcf8","type":"csv","z":"b779de97.b1b46","name":"","sep":"\\t","hdrin":false,"hdrout":"none","multi":"mult","ret":"\\n","temp":"Data,Modello,Cod Risultato,Descrizione risultato,Peaks,Thickness,Att,Gain,CatNo,CenterPeacks,Result,SpotID,TestID","skip":"1","strings":true,"include_empty_strings":"","include_null_values":"","x":580,"y":4880,"wires":[["de94863c.2eb88","f0fd38fb.47a258"]]},{"id":"de94863c.2eb88","type":"debug","z":"b779de97.b1b46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":610,"y":4980,"wires":[]},{"id":"f0fd38fb.47a258","type":"template","z":"b779de97.b1b46","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n \n \n \n TEST\n \n\n\n Welding Quality data
\n\n\n \n \n | Operatore: | \n Primary Account | \n Modello: | \n {{payload.0.Modello}} | \n Disegno: | \n | \n Provati: | \n 60/60 | \n
\n \n \n \n \n | Data: | \n {{payload.0.Data}} | \n \n
\n
\n \n \n\n\n \n \n\n\n| cod Risultato | Descrizione | Peaks | Thickness |
\n {{#payload}}\n \n | {{Cod Risultato}} | \n {{Descrizione risultato}} | \n {{Peaks}} | \n {{Thickness}} | \n
\n{{/payload}}\n
\n \n","output":"str","x":760,"y":4880,"wires":[["b11f0796.41ddb"]]},{"id":"b11f0796.41ddb","type":"ui_template","z":"b779de97.b1b46","group":"8b5cde76.edd58","name":"template table","order":1,"width":"12","height":"18","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":960,"y":4880,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
```
[edit] set first two to header table and removed first two columns.
---
**Author:**  [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [22 October 2021 16:33 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/5 "2021-10-22T16:33:35Z")
you dont need the function node .. the data is just fine from the csv node.
also no need for template but you do need the ui\_template
and with the magic of angular's ng-repeat you can loop through the data
**Flow:**
```auto
[{"id":"6722c10c.732b48","type":"inject","z":"7c2582a1.e3912c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":120,"wires":[["db01ad75.187108"]]},{"id":"db01ad75.187108","type":"file in","z":"7c2582a1.e3912c","name":"","filename":"/home/ros_test/ADDSRL-PC_T1_07-10-2019.csv","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":410,"y":120,"wires":[["f8e61f6d.6b99f"]]},{"id":"f8e61f6d.6b99f","type":"csv","z":"7c2582a1.e3912c","name":"","sep":"\\t","hdrin":true,"hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":690,"y":120,"wires":[["e61c9653146c08de","dae4e870.dc5e3"]]},{"id":"dae4e870.dc5e3","type":"ui_template","z":"7c2582a1.e3912c","group":"8b5cde76.edd58","name":"template table","order":1,"width":"23","height":"18","format":"\n\n\n\n \n \n \n TEST\n \n\n\n\n Welding Quality data
\n\n \n\n \n \n | Data | \n Modello | \n Cod. Risultato | \n Descrizione risultato | \n Peaks | \n Thickness | \n Att | \n Gain | \n CatNo | \n CenterPeacks | \n Result | \n SpotID | \n TestID | \n
\n \n\n\n \n \n | {{row.Data}}\n | {{row.Modello}} | \n {{row[\"Cod. Risultato\"]}} | \n {{row[\"Descrizione risultato\"]}} | \n {{row.Peaks}} | \n {{row.Thickness}} | \n {{row.Att}} | \n {{row.Gain}} | \n {{row.CatNo}} | \n {{row.CenterPeacks}} | \n {{row.Result}} | \n {{row.SpotID}} | \n {{row.TestID}} | \n
\n \n\n\n
\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":880,"y":120,"wires":[[]]},{"id":"e61c9653146c08de","type":"debug","z":"7c2582a1.e3912c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":800,"y":60,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"30bf4544.04a522","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"30bf4544.04a522","type":"ui_tab","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]
```
css styling from [dcode](https://codepen.io/dcode-software/pen/dLVwOY)
---
**Author:**  [@Miliks](https://discourse.nodered.org/u/Miliks)\
**Post date:** [22 October 2021 16:41 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/6 "2021-10-22T16:41:11Z")
well, this is cool, but i need the first two columns to be out of the table, they are part of the header, thats why i used the function node trying to parse the csv. is there any way to do it?
---
**Author:**  [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [22 October 2021 17:20 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/7 "2021-10-22T17:20:28Z")
> [@Miliks](#):
>
> but i need the first two columns to be out of the table
i see .. those two columns seem to be repeated in every array element so simply picking from the first will do
```auto
Welding Quality data - {{ msg.payload[0].Data }} - {{msg.payload[0].Modello}}
```
**Example:**
```auto
[{"id":"dae4e870.dc5e3","type":"ui_template","z":"7c2582a1.e3912c","group":"8b5cde76.edd58","name":"template table","order":1,"width":"23","height":"18","format":"\n\n\n\n \n \n \n TEST\n \n\n\n\n Welding Quality data - {{ msg.payload[0].Data }} - {{msg.payload[0].Modello}}
\n\n \n\n \n \n | Cod. Risultato | \n Descrizione risultato | \n Peaks | \n Thickness | \n Att | \n Gain | \n CatNo | \n CenterPeacks | \n Result | \n SpotID | \n TestID | \n
\n \n\n\n \n \n | {{row[\"Cod. Risultato\"]}} | \n {{row[\"Descrizione risultato\"]}} | \n {{row.Peaks}} | \n {{row.Thickness}} | \n {{row.Att}} | \n {{row.Gain}} | \n {{row.CatNo}} | \n {{row.CenterPeacks}} | \n {{row.Result}} | \n {{row.SpotID}} | \n {{row.TestID}} | \n
\n \n\n\n
\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":880,"y":120,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"30bf4544.04a522","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"30bf4544.04a522","type":"ui_tab","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]
```
---
**Author:**  [@Miliks](https://discourse.nodered.org/u/Miliks)\
**Post date:** [22 October 2021 23:11 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/8 "2021-10-22T23:11:01Z")
thanks a lot! your suggestion is working perfectly. Another question then, i do need to get the .html file out from html template node. i need to send it to another component to visualize as is. Looks like it pass throgh only array of JSON objects with the data and not the html structure though. i use the "file" node to store it, but get the
---
**Author:**  [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [22 October 2021 23:58 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/9 "2021-10-22T23:58:18Z")
You can use JS ` template literals` and javascript `forEach` to replicate what Angular does in the ui\_template
```auto
[{"id":"6722c10c.732b48","type":"inject","z":"7c2582a1.e3912c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":120,"wires":[["db01ad75.187108"]]},{"id":"db01ad75.187108","type":"file in","z":"7c2582a1.e3912c","name":"","filename":"c:/share/ADDSRL-PC_T1_07-10-2019.csv","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":420,"y":120,"wires":[["f8e61f6d.6b99f"]]},{"id":"f8e61f6d.6b99f","type":"csv","z":"7c2582a1.e3912c","name":"","sep":"\\t","hdrin":true,"hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":690,"y":120,"wires":[["e61c9653146c08de","dae4e870.dc5e3","75a23ba2cd405a73"]]},{"id":"dae4e870.dc5e3","type":"ui_template","z":"7c2582a1.e3912c","group":"8b5cde76.edd58","name":"template table","order":1,"width":"23","height":"18","format":"\n\n\n\n \n \n \n TEST\n \n\n\n\n Welding Quality data - {{ msg.payload[0].Data }} - {{msg.payload[0].Modello}}
\n\n \n\n \n \n | Cod. Risultato | \n Descrizione risultato | \n Peaks | \n Thickness | \n Att | \n Gain | \n CatNo | \n CenterPeacks | \n Result | \n SpotID | \n TestID | \n
\n \n\n\n \n \n | {{row[\"Cod. Risultato\"]}} | \n {{row[\"Descrizione risultato\"]}} | \n {{row.Peaks}} | \n {{row.Thickness}} | \n {{row.Att}} | \n {{row.Gain}} | \n {{row.CatNo}} | \n {{row.CenterPeacks}} | \n {{row.Result}} | \n {{row.SpotID}} | \n {{row.TestID}} | \n
\n \n\n\n
\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":960,"y":120,"wires":[[]]},{"id":"e61c9653146c08de","type":"debug","z":"7c2582a1.e3912c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":800,"y":60,"wires":[]},{"id":"75a23ba2cd405a73","type":"function","z":"7c2582a1.e3912c","name":"create html","func":"\nlet html = `\n\n\n\n \n \n \n ${msg.payload[0].Modello} - ${ msg.payload[0].Data }\n \n\n\n\n Welding Quality data - ${ msg.payload[0].Data } - ${msg.payload[0].Modello}
\n\n \n\n \n \n | Cod. Risultato | \n Descrizione risultato | \n Peaks | \n Thickness | \n Att | \n Gain | \n CatNo | \n CenterPeacks | \n Result | \n SpotID | \n TestID | \n
\n \n\n `\n\nlet rows = \"\"\n\nmsg.payload.forEach(el => {\n rows += `\n\n | ${el[\"Cod. Risultato\"]} | \n ${el[\"Descrizione risultato\"]} | \n ${el.Peaks} | \n ${el.Thickness} | \n ${el.Att} | \n ${el.Gain} | \n ${el.CatNo} | \n ${el.CenterPeacks} | \n ${el.Result} | \n ${el.SpotID} | \n ${el.TestID} | \n
` })\n\n\nhtml = html + rows + `\n
\n\n`\n\nmsg.payload = html\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":790,"y":280,"wires":[["f04eef7c3fcdb5c8"]]},{"id":"f04eef7c3fcdb5c8","type":"file","z":"7c2582a1.e3912c","name":"","filename":"c:\\share\\table.html","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"none","x":990,"y":280,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"30bf4544.04a522","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"30bf4544.04a522","type":"ui_tab","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]
```
**ps. Change the paths in the file nodes to match for your system**
---
**Author:**  [@Miliks](https://discourse.nodered.org/u/Miliks)\
**Post date:** [25 October 2021 07:55 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/10 "2021-10-25T07:55:56Z")
this is exactly what i was looking for! Thanks a lot!
---
**Author:**  [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 November 2021 07:56 UTC](https://discourse.nodered.org/t/create-html-from-csv-using-just-few-columns/52580/11 "2021-11-08T07:56:37Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.