Search code examples
listviewnativescript-vue

Nested listview for multidimensional array


I have a json where many teams have many members and I don't know haw to display it with a ListView. I've tried nested ListView but the loop stops after one member.

This is the json structure

[
    {
        "name": "Red Team",
        "members": [
            {
                "name": "John",
                "role": "Member"
            },
            {
                "name": "Mike",
                "role": "President"
            }
            ...
        ]
    },
    {
        "name": "Green Team",
        "members": [
            {
                "name": "Alan",
                "role": "Member"
            },
            {
                "name": "Adam",
                "role": "President"
            }
            ...
        ]
    }
    ...
]

This is my code

<StackLayout>
    <Label class="message" text="Team" />
    <ListView for="teams in teamMembers">
        <v-template>
            <StackLayout>
                <Label :text="teams.name" />
                <ListView for="member in teams.members">
                    <v-template>
                        <Label :text="member.name" />
                    </v-template>
                </ListView>
            </StackLayout>
        </v-template>
    </ListView>
</StackLayout>

Any Idea?

Thanks


Solution

  • I solved with an intermediate page of teams and then a page o team's members.