Nativescript - Repeater with nested data

Question

I have some data from external API. It returns nested array, wchich looks like follows:

var myData = [
    {
        "id": 30,
        "type": "Product",
        "name": "Product Name",
        "children": {
            "661031278126991": {
                "id": 45,
                "type": "Releases",
                "name": "2019",
                "parent": 30,
                "children": {
                    "6611311403631192": {
                        "id": 12,
                        "type": "Features",
                        "name": "Clients",
                        "parent": 80,
                        "children": {
                            "66103580432771": {
                                "id": 80,
                                "type": "Tasks",
                                "name": "List",
                                "parent": 12
                            },
                            "66103144161527": {
                                "id": 45,
                                "type": "Tasks",
                                "name": "List B",
                                "parent": 12
                            }
                        }
                    }
                }
            }
        }
    }
];

The problem is that i have multiple "Tasks" for example and now i'm stuck. I don't even know if it's possible to create a view from this data.

Below, i pasted some XML code that will surely not work, but it will help to explain what kind of layout i want to render. I just have hope that Repeater can render this somehow. Thank you for any advice.

<Repeater items="{{ myData }}">
                    <Repeater.itemTemplate>
                        <StackLayout>
                            <StackLayout class="sep">
                                <Label text="{{ type }}" class="item"></Label>
                            </StackLayout>
                            <StackLayout class="sep">
                                <Label text="{{ children.name }}" class="item"></Label>
                                <StackLayout class="sep">
                                    <Label text="{{ children.children.name }}" class="item"></Label>
                                    <StackLayout class="sep">
                                        <Label text="{{ children.children.children.name }}" ></Label>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </StackLayout>
                    </Repeater.itemTemplate>
                </Repeater>

Answer 1

Repeater does not work with object, so you will have to loop through your children object and convert the key value pairs into an Array.

Then you will have to build a custom component that includes itself within a Repeater, so all your child elements can be rendered one after another.

Parent Component

<ScrollView>
  <Repeater items="{{ myData }}">
   <Repeater.itemTemplate>
     <comps:child-component></comps:child-component>
   </Repeater.itemTemplate>
 </Repeater>

Child Component

<StackLayout xmlns:comps="components">
    <Label text="{{ name }}" class="m-y-10 m-x-10 h3"></Label>
    <Repeater items="{{ children }}">
        <Repeater.itemTemplate>
            <comps:child-component></comps:child-component>
        </Repeater.itemTemplate>
    </Repeater>
</StackLayout>

Here is a Playground Sample .

Note: If you are planning to render 100s of this type of array, then you must consider following a different approach to avoid performance hit. May be you can use a ListView to load first level of items, upon tap load the second level of items in the next screen.