# Display nested tables using Template node

**URL:** <https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548>\
**Category:** Dashboard\
**Created:** [10 October 2019 12:20 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548 "2019-10-10T12:20:59Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [10 October 2019 12:20 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/1 "2019-10-10T12:20:59Z")

</div>

I need a bit advise in order to display a nested table:

I pass the table on to the template node in msg.group\_table.

 ![Aantekening%202019-10-10%20141034](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8a307ffa8415b2655587e3ab7be7b7763e9c0657.jpeg)

The group\_table is an array of objects, each object contains a group\_name and an object with a list of devices:

 ![Aantekening%202019-10-10%20141410](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e1b9ede9ea3e41456fb666efd3fea1c3fe7420f2.jpeg)

I tried to use the template node to display the table but it does not work. I only get the group\_names displayed but the nested device\_names do not appear.

```auto
<table>
<tr>
    <td><B><U>Groep:</U></B></td> 
    <td><B><U>Naam:</U></B></td>
    <td><B><U>Omschrijving:</U></B></td>
    <td><B><U>Model:</U></B></td>
    <td><B><U>Adres:</U></B></td>  
</tr>
<tr ng-repeat="obj in msg.group_table">
    <td>{{ obj.group_name }}</td>
    <tr ng-repeat="obj in msg.group_table.devices">
       <td>{{ obj.device_name }}</td>
       <td>{{ obj.omschrijving }}</td>
       <td>{{ obj.model }}</td>
       <td>{{ obj.address }}</td>
</tr>
</table>

```

Node-RED v1.0.1  
Where is my mistake?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 October 2019 18:55 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/2 "2019-10-10T18:55:31Z")

</div>

Maybe try changing "obj" in the repeat to "obj2" or something else.

---

<div class="post-metadata">

**Author:** ![clickworkorange](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/clickworkorange/32/12109_2.png) [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)\
**Post date:** [11 October 2019 08:48 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/3 "2019-10-11T08:48:26Z")

</div>

Looking at your msg object, shouldn't `devices` in the template node be `device_list`? Also, it's a nested property of the current `obj`, so I think something like this should work:

```auto
<tr ng-repeat="obj in msg.group_table">
    <td>{{ obj.group_name }}</td>
    <tr ng-repeat="device in obj.device_list">
    ...

```

---

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [11 October 2019 11:16 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/4 "2019-10-11T11:16:13Z")

</div>

Yes, you're right concerning devices should be device\_list.  
Unfortunately does your suggestion not work. Thank you anyway.

---

<div class="post-metadata">

**Author:** ![clickworkorange](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/clickworkorange/32/12109_2.png) [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)\
**Post date:** [11 October 2019 17:39 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/5 "2019-10-11T17:39:29Z")

</div>

It should work. Can you post an example `msg`? I mean the actual thing, rather than a sceengrab...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 October 2019 13:43 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/6 "2019-10-12T13:43:24Z")

</div>

Your second repeat uses the wrong object. Make it use `obj` instead of msg otherwise you won't know which element of the outer array you should be using.

If you had followed my original suggestion, I think you would have spotted that.

---

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [13 October 2019 11:13 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/7 "2019-10-13T11:13:05Z")

</div>

I tried several of your suggestions, they do not make a difference. Nothing from the second iteration is displayed. Only the group\_names are listed. It makes no difference if I change "device" in "obj2".

```auto
<table>
<tr>
    <td><B><U>Groep:</U></B></td> 
    <td><B><U>Naam:</U></B></td>
    <td><B><U>Omschrijving:</U></B></td>
    <td><B><U>Model:</U></B></td>
    <td><B><U>Adres:</U></B></td>  
</tr>
<tr ng-repeat="obj in msg.group_table">
    <td>{{ obj.group_name }}</td>
    <tr ng-repeat="device in obj.device_list">
       <td>{{ device.device_name }}</td>
       <td>{{ device.omschrijving }}</td>
       <td>{{ device.model }}</td>
       <td>{{ device.address }}</td>
</tr>
</table>

```

![Aantekening%202019-10-13%20131418](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/ce3cd0f4812fa4faf8be2052f57571113ed2eb44.jpeg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 October 2019 12:23 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/8 "2019-10-13T12:23:31Z")

</div>

When you are moving the data from your `group_table` variable to a msg, you probably moved it to `msg.payload`?

In the future, please give people all of the information. A copy of the actual input msg, a copy of the function you are using as well as the template. Otherwise we waste a lot of time and energy.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 October 2019 13:06 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/9 "2019-10-13T13:06:28Z")

</div>

Given the following data:

```json
[
    {
        "group_name": "White_Group",
        "device_list": [
            {
                "device_name": "dev1",
                "group_name": "White_Group",
                "omschrijving": "A device",
                "model": "LED123",
                "address": "0xAAAAAAA"
            },
            {
                "device_name": "dev2",
                "group_name": "White_Group",
                "omschrijving": "Another device",
                "model": "LED456",
                "address": "0xBBBBBB"
            }
        ]
    },
    {
        "group_name": "Green_Group",
        "device_list": [
            {
                "device_name": "dev3",
                "group_name": "Green_Group",
                "omschrijving": "Device #3",
                "model": "LED5678",
                "address": "0xCCCCC"
            },
            {
                "device_name": "dev4",
                "group_name": "Green_Group",
                "omschrijving": "Device #4",
                "model": "LED9012",
                "address": "0xDDDDDD"
            }
        ]
    }
]

```

And the following template:

```auto
<h2>Option 1</h2>
<div ng-repeat="obj in msg.payload">
    <h3>{{ obj.group_name }}</h3>
    <table><thead>
        <tr>
            <th>Groep</th> 
            <th>Naam</th>
            <th>Omschrijving</th>
            <th>Model</th>
            <th>Adres</th>  
        </tr></thead><tbody>
        <tr rowspan="99">
            <td>{{ obj.group_name }}</td>
        </tr>
        <tr ng-repeat="device in obj.device_list">
            <td></td>
            <td>{{ device.device_name }}</td>
            <td>{{ device.omschrijving }}</td>
            <td>{{ device.model }}</td>
            <td>{{ device.address }}</td>
        </tr>
    </tbody></table>
</div>

<hr>

<h2>Option 2</h2>
<div>
    <table><thead>
        <tr>
            <th>Groep</th> 
            <th>Naam</th>
            <th>Omschrijving</th>
            <th>Model</th>
            <th>Adres</th>  
        </tr></thead><tbody>
        <tr ng-repeat-start="obj in msg.payload">
            <td colspan="4">{{ obj.group_name }}</td>
        </tr>
        <tr ng-repeat="device in obj.device_list">
            <td>&nbsp;</td>
            <td>{{ device.device_name }}</td>
            <td>{{ device.omschrijving }}</td>
            <td>{{ device.model }}</td>
            <td>{{ device.address }}</td>
        </tr>
        <tr ng-repeat-end>
            <td colspan="4">&nbsp;</td>
        </tr>
    </tbody></table>
</div>

```

You will get the following output:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0e5aa0f00ae2ad495b5696219e0bdd42ec443b34.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 October 2019 13:12 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/10 "2019-10-13T13:12:49Z")

</div>

And a possible better version as another alternative:

```auto
<h2>Option 3</h2>
<div>
    <table><thead>
        <tr>
            <th>Groep</th> 
            <th>Naam</th>
            <th>Omschrijving</th>
            <th>Model</th>
            <th>Adres</th>  
        </tr></thead>
        <tbody ng-repeat="obj in msg.payload">
            <tr >
                <td colspan="4">{{ obj.group_name }}</td>
            </tr>
            <tr ng-repeat="device in obj.device_list">
                <td>&nbsp;</td>
                <td>{{ device.device_name }}</td>
                <td>{{ device.omschrijving }}</td>
                <td>{{ device.model }}</td>
                <td>{{ device.address }}</td>
            </tr>
        </tbody>
    </table>
</div>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d13ad2482d730bd3f68ddfc5341322c37c09ebbe.png)

I had to look up whether you were allowed multiple `tbody` tags in a table and you are.

---

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [13 October 2019 14:46 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/11 "2019-10-13T14:46:14Z")

</div>

The data was moved to msg.group\_table....

---

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [13 October 2019 14:46 UTC](https://discourse.nodered.org/t/display-nested-tables-using-template-node/16548/12 "2019-10-13T14:46:56Z")

</div>

Your options do work great, thank you so much!!!  
This is a real help for me.