Complex msg.payload structure to be sent to ui_templete based table?

[Nodi.Rubrum]

I am struggling with how to adapt the msg.payload structure I have to an ui template based table. I suspect someone will see an easy way to do what I am attempting.

Each msg.payload is an array of 2 objects structures. Each object has a consistent number of items. Example:

array[2]
0: object
Index: 738
Time: 1593642608.9093015
Temperature: 33.42
Pressure: 1000.5715275790338
Humidity: null
Sensor: 2
Altitude: null
Host: 1
1: object
Index: 737
Time: 1593642608.8785386
Temperature: 32.92019531548027
Pressure: null
Humidity: 33.15327687495232
Sensor: 3
Altitude: null
Host: 1

I would like to group the two objects, each msg.payload instance, in the same table frame, so they can have a common caption, which would be the Host value in the above objects.

+-------------------------------------------------------------------------------------+
| Host                                                                                                    |
+-------------------------------------------------------------------------------------+
| Index | Time | Temperature | Pressure | Humidity | Sensor | Altitude |
+-------------------------------------------------------------------------------------+
|          |          |                       |                 |                |              |              |
+-------------------------------------------------------------------------------------+
|          |          |                       |                 |                |              |              |
+-------------------------------------------------------------------------------------+
+-------------------------------------------------------------------------------------+
| Host                                                                                                    |
+-------------------------------------------------------------------------------------+
| Index | Time | Temperature | Pressure | Humidity | Sensor | Altitude |
+-------------------------------------------------------------------------------------+
|          |          |                       |                 |                |              |              |
+-------------------------------------------------------------------------------------+
|          |          |                       |                 |                |              |              |
+-------------------------------------------------------------------------------------+
+-------------------------------------------------------------------------------------+
| Host                                                                                                    |
+-------------------------------------------------------------------------------------+
| Index | Time | Temperature | Pressure | Humidity | Sensor | Altitude |
+-------------------------------------------------------------------------------------+
|          |          |                       |                 |                |              |              |
+-------------------------------------------------------------------------------------+
|          |          |                       |                 |                |              |              |
+-------------------------------------------------------------------------------------+

The number of msg.payloads will be up to about 20 or so, so this table will not be an insane size. I already have the SQL queries working to grab the data, have a loop node to walk through the number of paired records found. The issue is how to transform the data into a ui_template of course.

I suspect that each section is its own ui_table object? I am sure using ng-repeat methodology is foundational to this effort? The trick, getting the column headings and the caption set per group/pair of records? This is encouraging my hair to fall out... faster.

Thanks in advance for any assistance.

[E1cid]

not really sure how your data is being received. But the below flow will append the new payload to the end of the last, creating a table.

[{"id":"fb477a3b.9a5ba","type":"inject","z":"4484ee28.caa3c","name":"","topic":"","payload":"[{\"Index\":738,\"Time\":1593642608.9093015,\"Temperature\":33.42,\"Pressure\":1000.5715275790338,\"Humidity\":null,\"Sensor\":2,\"Altitude\":null,\"Host\":1},{\"Index\":737,\"Time\":1593642608.9093015,\"Temperature\":34.42,\"Pressure\":1001.5715275790338,\"Humidity\":null,\"Sensor\":3,\"Altitude\":null,\"Host\":1}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":280,"wires":[["f128862e.fb8518"]]},{"id":"f128862e.fb8518","type":"function","z":"4484ee28.caa3c","name":"","func":"var tab = flow.get('template') || '';\ntab = (tab === '') ? '<table style=\"width: 100%;\" border=\"1\"><tbody>' : tab;\nfor (var i in msg.payload){\n    tab = (i === '0') ? (tab + '<tr><td colspan=\"' + (Object.keys(msg.payload[i]).length - 1) + '\">Host : ' + msg.payload[i].Host + '</td></tr><tr><td>' + Object.keys(msg.payload[0]).slice(0,-1).join('</td><td>') + '</td></tr>') : tab;\n    tab = tab + '<tr><td>' + Object.values(msg.payload[i]).slice(0, -1).join('</td><td>') + '</td></tr>';\n}\nflow.set('template', tab);\ntab = tab + '</tbody></table>';\nreturn {template: tab};","outputs":1,"noerr":0,"x":260,"y":220,"wires":[["761728f6.4c9d98","b6f9a794.7feec8"]]},{"id":"761728f6.4c9d98","type":"ui_template","z":"4484ee28.caa3c","group":"6293e9bc.df8968","name":"","order":9,"width":"18","height":"3","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":420,"y":280,"wires":[[]]},{"id":"b6f9a794.7feec8","type":"debug","z":"4484ee28.caa3c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":460,"y":220,"wires":[]},{"id":"6293e9bc.df8968","type":"ui_group","z":"","name":"Default","tab":"a1e95e9e.580868","order":1,"disp":false,"width":"18","collapse":false},{"id":"a1e95e9e.580868","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

keep pressing inject to see results.
Hope it helps.

[tbdltee]

my technique is using online wysiwyg html editor to create a table template. Once you get what it look like, grap the piece and paste the code in the ui-template., then replace a dummy text that I put in the html editor with msg object.
In your case, each will have a new table inside. And one host can have many sensors. I think you also need to rearrange the msg.payload to match the table design, e.g. group by host rather than flat data like current one.

Below is an example. This is copy&paste from html editor (https://html5-editor.net/):

<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td colspan="7">Host</td>
</tr>
<tr>
<td>index</td>
<td>time</td>
<td>Temp</td>
<td>Pressure</td>
<td>Humidity</td>
<td>Sensor</td>
<td>Altitude</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Then, replace it with a code:

<table>
<tbody ng-repeat="data in msg.payload">
<tr>
<td>
<table>
<tbody>
<tr>
<td colspan="7">{{data.Host}}</td>
</tr>
<tr>
<td>index</td>
<td>time</td>
<td>Temp</td>
<td>Pressure</td>
<td>Humidity</td>
<td>Sensor</td>
<td>Altitude</td>
</tr>
<tr>
<td>{{data.Index}}</td>
<td>{{data.Time}}</td>
<td>{{data.Temperature}}</td>
<td>{{data.Pressure}}</td>
<td>{{data.Humidity}}</td>
<td>{{data.Sesnor}}</td>
<td>{{data.Altitude}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>```