# Display array data in table one by one

**URL:** <https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730>\
**Category:** Dashboard\
**Created:** [6 December 2024 10:51 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730 "2024-12-06T10:51:36Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [6 December 2024 10:51 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/1 "2024-12-06T10:51:36Z")

</div>

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

[https://flows.nodered.org/flow/76cd6afbd14426f88656c90aedf10423](https://flows.nodered.org/flow/76cd6afbd14426f88656c90aedf10423)

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

```auto
{{item}}

```

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

thanks

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 December 2024 14:00 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/2 "2024-12-06T14:00:35Z")

</div>

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

 ![2D_table](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fa8d4979e9b08a1d655e4321d035360c37e830d1.png)

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

Note: this was built on dashboard 1

---

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [6 December 2024 14:51 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/3 "2024-12-06T14:51:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 December 2024 15:22 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/4 "2024-12-06T15:22:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [6 December 2024 15:45 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/5 "2024-12-06T15:45:49Z")

</div>

In the table looks the same, but:  
instead have

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

```

I want something like

```auto
 <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.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [6 December 2024 16:55 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/6 "2024-12-06T16:55:48Z")

</div>

> [@lucianv](#):
>
> ```auto
> <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>
> 
> ```

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

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

```

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

---

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [6 December 2024 17:23 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/7 "2024-12-06T17:23:50Z")

</div>

Hi,

My data is a result of a select from db

```auto
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

```auto
 <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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 December 2024 17:47 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/8 "2024-12-06T17:47:24Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3fa105ad7e2bc85e83d3c6a673c6a0c04362281a.png)  
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:

```auto
<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:

```auto
[{"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](https://github.com/juggledad/pypi-info)

---

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [6 December 2024 18:03 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/9 "2024-12-06T18:03:24Z")

</div>

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

```auto
[[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"]]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 December 2024 18:05 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/10 "2024-12-06T18:05:05Z")

</div>

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

 ![Screenshot 2024-12-06 at 12.54.45 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3fa105ad7e2bc85e83d3c6a673c6a0c04362281a.png)  
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:

```auto
<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:

```auto
[{"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](https://github.com/juggledad/pypi-info)

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

---

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [6 December 2024 18:34 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/11 "2024-12-06T18:34:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 December 2024 18:45 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/12 "2024-12-06T18:45:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 March 2025 18:45 UTC](https://discourse.nodered.org/t/display-array-data-in-table-one-by-one/93730/13 "2025-03-06T18:45:40Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.