Display array data in table one by one

Dashboard
1

Hi,
There is a great example for that, so I will ask my question based on this example.

https://flows.nodered.org/flow/76cd6afbd14426f88656c90aedf10423

How can I display data in three td ?
I mean instead

{{item}}

to have one td for first element of array, then one td for second one, and so on..

thanks

2

I'm not clear on what you are asking. If you run the code from that flow you will see this:

2D_table
2D_table326Ă—210 8.19 KB

The sample data is built into an array in the function node.

Note: this was built on dashboard 1

3

I want to have 3 x td not only one for every line. Basically i want each array entry into a variable

4

I'm not sure what you mean, can you sketch up what it should look like in a table?

5

In the table looks the same, but:
instead have

 <td ng-repeat="item in row" >{{item}}</td>

I want something like

 <td ng-repeat="item in row" >{{item.name}}</td>
 <td ng-repeat="item in row" >{{item.surname}}</td>
 <td ng-repeat="item in row" >{{item.age}}</td>

Basically I want "Paul" , "Doe" and "24" like 3 different variables, not like one array line.

6

This would lead me to believe you array is an array of objects not a 2d array
Please supply your data to save any confusion.
Try

<td ng-repeat="(key, item) in row">{{item}}</td>

key would hold the property names name, surname, age.

1 Like
7

Hi,

My data is a result of a select from db

let nr_teste = msg.payload.length;

let arhiva_array = [];

    
for (let i = 0; i < nr_teste; i++) {

    arhiva_array[i] = [
        
            msg.payload[i].id,
            msg.payload[i].data_test,
            msg.payload[i].inspector,
            msg.payload[i].nr_inmatriculare,
            msg.payload[i].REZULTAT
        
    ];
        
msg.payload = arhiva_array;



return msg;

and in table i have

 <tr ng-repeat="row in msg.payload">

        <td ng-repeat="item in row">{{item}}</td>

My goal is to make id on each line as link and do something when click on it

Thank you

8

Please create some dummy data that would go into the function node and paste it to a reply.

Thinking about it, I think this might be what you are looking for, a display like this:

Screenshot 2024-12-06 at 12.54.45 PM
Screenshot 2024-12-06 at 12.54.45 PM703Ă—440 64.8 KB

and in this case, the IP address can be clicked and it links to the Node-RED site on that IP address.

This is what the template looks like:

<div id="et_home">
<h2 style="text-align: center;">PyPI Display Home </h2>
<p style="text-align: center;">List of Raspberry Pi's found on your LAN<p>
<p style="text-align: center;">Click on a 'Hostname' will get you details of that device<p>
<p style="text-align: center;">Click on a 'IP' will attempt to open Node-RED on that Pi<p>

<br/>
<table id="table" border="1">
    <tr>
        <th>Hostname</th> 
        <th>User</th> 
        <th>IP</th> 
        <th>Last Seen</th> 
        <th>Model</th>
        <th>OS</th>
        <th>Disk Used</th>
        <th>Temperature</th>
    </tr>
    <tbody style="text-align: center">
        <tr ng-repeat="x in msg.payload">
            <td ng-if="x.device_status ==  'database is empty'" class="warning_red" >DATABASE IS EMPTY</td>

            <td ng-if='x.device_status ==  1' class="device_online" style="text-align: left"> 
                <md-button ng-click="send({host: x.hostname})">{{x.hostname}}</md-button>
            </td>
            <td ng-if='x.device_status ==  0' class="device_offline" style="text-align: left"> 
                <md-button ng-click="send({host: x.hostname})">{{x.hostname}}</md-button>
            </td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.user}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.user}} </td>

            <td ng-if='x.device_status ==  1' class="device_online" ><a href="http://{{x.hostname}}.local:1880" target="_blank"> {{x.ip}} </a></td>
            <td ng-if='x.device_status ==  0' class="device_offline" ><a href="http://{{x.hostname}}.local:1880" target="_blank"> {{x.ip}} </a></td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.last_seen_text}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.last_seen_text}} </td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.model}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.model}} </td>


            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.osrelease}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.osrelease}} </td>


            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.disk_percentused}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.disk_percentused}} </td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.temperature}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.temperature}} </td>

         </tr>
    </tbody>
</table>

</div>

and here is the data being sent to the template node:

[{"disk_percentused":"3%","last_seen":1733507594190,"ip":"192.168.1.3","model":"Pi 4 Model B Rev 1.4","osrelease":"buster","temperature":42.8,"uptime":"up 1 week, 4 days, 7 hours, 10 minutes","user":"pi","hostname":"argonpi","device_status":1,"last_seen_text":"12/6/2024, 12:53:14 PM"},{"disk_percentused":"16%","last_seen":1733507594243,"ip":"192.168.1.173","model":"Pi 3 Model B Plus Rev 1.3","osrelease":"buster","temperature":49.4,"uptime":"up 11 weeks, 2 days, 3 hours, 19 minutes","user":"pi","hostname":"fastpi","device_status":1,"last_seen_text":"12/6/2024, 12:53:14 PM"},{"disk_percentused":"7%","last_seen":1733507595452,"ip":"192.168.1.228","model":"Pi Zero W Rev 1.1","osrelease":"buster","temperature":33.6,"uptime":"up 1 week, 4 days, 6 hours, 35 minutes","user":"pi","hostname":"mqttpizw","device_status":1,"last_seen_text":"12/6/2024, 12:53:15 PM"},{"disk_percentused":"15%","last_seen":1733507594113,"ip":"192.168.1.233","model":"Pi 4 Model B Rev 1.2","osrelease":"bullseye","temperature":49.1,"uptime":"up 2 weeks, 8 hours, 52 minutes","user":"pmw","hostname":"superpi","device_status":1,"last_seen_text":"12/6/2024, 12:53:14 PM"},{"disk_percentused":"48%","last_seen":1732683964253,"ip":"192.168.1.174","model":"Pi 3 Model B Rev 1.2","osrelease":"bullseye","temperature":49.9,"uptime":"up 6 days, 3 hours, 55 minutes","user":"pmw","hostname":"testpi","device_status":0,"last_seen_text":"11/27/2024, 12:06:04 AM"},{"disk_percentused":"19%","last_seen":1728391239124,"ip":"192.168.1.175","model":"Pi 3 Model B Rev 1.2","osrelease":"buster","temperature":49.9,"uptime":"up 2 weeks, 5 days, 22 hours, 7 minutes","user":"pi","hostname":"yellowpi","device_status":0,"last_seen_text":"10/8/2024, 8:40:39 AM"}]

This is from my pypi-info project GitHub - juggledad/pypi-info: Python program to run cmds sent via MQTT and return results

9

This is my msg.payload , which is a result of a selection of 4 rows from db

[[40,"2024-10-11T07:25:03.000Z","nume111 prenume1","GR20BIS","ADMIS"],[39,"2024-10-09T04:23:59.000Z","nume111 prenume1","nr_inm0","ADMIS"],[38,"2024-09-08T07:28:24.000Z","nume111 prenume1","nr_inm0","ADMIS"],[37,"2024-10-08T07:28:24.000Z","nume111 prenume1","nr_inm0","ADMIS"]]
10

I think this might be what you are looking for, a display like this:

Screenshot 2024-12-06 at 12.54.45 PM
Screenshot 2024-12-06 at 12.54.45 PM703Ă—440 64.8 KB

and in this case, the IP address can be clicked and it links to the Node-RED site on that IP address.

This is what the template looks like:

<div id="et_home">
<h2 style="text-align: center;">PyPI Display Home </h2>
<p style="text-align: center;">List of Raspberry Pi's found on your LAN<p>
<p style="text-align: center;">Click on a 'Hostname' will get you details of that device<p>
<p style="text-align: center;">Click on a 'IP' will attempt to open Node-RED on that Pi<p>

<br/>
<table id="table" border="1">
    <tr>
        <th>Hostname</th> 
        <th>User</th> 
        <th>IP</th> 
        <th>Last Seen</th> 
        <th>Model</th>
        <th>OS</th>
        <th>Disk Used</th>
        <th>Temperature</th>
    </tr>
    <tbody style="text-align: center">
        <tr ng-repeat="x in msg.payload">
            <td ng-if="x.device_status ==  'database is empty'" class="warning_red" >DATABASE IS EMPTY</td>

            <td ng-if='x.device_status ==  1' class="device_online" style="text-align: left"> 
                <md-button ng-click="send({host: x.hostname})">{{x.hostname}}</md-button>
            </td>
            <td ng-if='x.device_status ==  0' class="device_offline" style="text-align: left"> 
                <md-button ng-click="send({host: x.hostname})">{{x.hostname}}</md-button>
            </td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.user}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.user}} </td>

            <td ng-if='x.device_status ==  1' class="device_online" ><a href="http://{{x.hostname}}.local:1880" target="_blank"> {{x.ip}} </a></td>
            <td ng-if='x.device_status ==  0' class="device_offline" ><a href="http://{{x.hostname}}.local:1880" target="_blank"> {{x.ip}} </a></td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.last_seen_text}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.last_seen_text}} </td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.model}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.model}} </td>


            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.osrelease}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.osrelease}} </td>


            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.disk_percentused}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.disk_percentused}} </td>

            <td ng-if='x.device_status ==  1' class="device_online"  >{{x.temperature}} </td>
            <td ng-if='x.device_status ==  0' class="device_offline" >{{x.temperature}} </td>

         </tr>
    </tbody>
</table>

</div>

and here is the data being sent to the template node:

[{"disk_percentused":"3%","last_seen":1733507594190,"ip":"192.168.1.3","model":"Pi 4 Model B Rev 1.4","osrelease":"buster","temperature":42.8,"uptime":"up 1 week, 4 days, 7 hours, 10 minutes","user":"pi","hostname":"argonpi","device_status":1,"last_seen_text":"12/6/2024, 12:53:14 PM"},{"disk_percentused":"16%","last_seen":1733507594243,"ip":"192.168.1.173","model":"Pi 3 Model B Plus Rev 1.3","osrelease":"buster","temperature":49.4,"uptime":"up 11 weeks, 2 days, 3 hours, 19 minutes","user":"pi","hostname":"fastpi","device_status":1,"last_seen_text":"12/6/2024, 12:53:14 PM"},{"disk_percentused":"7%","last_seen":1733507595452,"ip":"192.168.1.228","model":"Pi Zero W Rev 1.1","osrelease":"buster","temperature":33.6,"uptime":"up 1 week, 4 days, 6 hours, 35 minutes","user":"pi","hostname":"mqttpizw","device_status":1,"last_seen_text":"12/6/2024, 12:53:15 PM"},{"disk_percentused":"15%","last_seen":1733507594113,"ip":"192.168.1.233","model":"Pi 4 Model B Rev 1.2","osrelease":"bullseye","temperature":49.1,"uptime":"up 2 weeks, 8 hours, 52 minutes","user":"pmw","hostname":"superpi","device_status":1,"last_seen_text":"12/6/2024, 12:53:14 PM"},{"disk_percentused":"48%","last_seen":1732683964253,"ip":"192.168.1.174","model":"Pi 3 Model B Rev 1.2","osrelease":"bullseye","temperature":49.9,"uptime":"up 6 days, 3 hours, 55 minutes","user":"pmw","hostname":"testpi","device_status":0,"last_seen_text":"11/27/2024, 12:06:04 AM"},{"disk_percentused":"19%","last_seen":1728391239124,"ip":"192.168.1.175","model":"Pi 3 Model B Rev 1.2","osrelease":"buster","temperature":49.9,"uptime":"up 2 weeks, 5 days, 22 hours, 7 minutes","user":"pi","hostname":"yellowpi","device_status":0,"last_seen_text":"10/8/2024, 8:40:39 AM"}]

This is from my pypi-info project GitHub - juggledad/pypi-info: Python program to run cmds sent via MQTT and return results

Note one thing, this runs on dashboard 1. I haven't looked at changing it for dashboard 2 yet.

1 Like
11

Is a very intersting example, but your data format looks different than mine ...
thanks anyway, i will see maybe can adapt something

12

The difference is that I have an array of objects and you have an array of arrays. By using the objects it makes it easy to see what each item is.