Display nested tables using Template node

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.

The group_table is an array of objects, each object contains a group_name and an object with a list of devices:

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.

<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?

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

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:

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

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

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

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.

1 Like

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".

<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

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.

Given the following data:

[
    {
        "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:

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

And a possible better version as another alternative:

<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

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

The data was moved to msg.group_table....

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