Nativescript - повторитель с вложенными данными

Question

У меня есть данные из внешнего API. Возвращает вложенный массив, который выглядит следующим образом:

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
                            }
                        }
                    }
                }
            }
        }
    }
];

Проблема в том, что у меня есть несколько "Задач", например, и теперь я застрял. Я даже не знаю, возможно ли создать представление из этих данных.

Ниже я вставил некоторый код XML, который, безусловно, не будет работать, но он поможет объяснить, какой тип макета я хочу отобразить. У меня просто есть надежда, что Repeater может каким-то образом это сделать. Спасибо за любой совет.

<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 не работает с объектом, поэтому вам придется пройтись по объекту children и преобразовать пары ключ-значение в массив.

Затем вам нужно будет создать собственный компонент, который включает себя в Repeater, чтобы все ваши дочерние элементы могли отображаться один за другим.

Родительский компонент

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

дочерний компонент

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

Вот образец Playground .

Примечание: Если вы планируете визуализировать 100-ые массивы этого типа, вам следует рассмотреть возможность использования другого подхода, чтобы избежать снижения производительности. Может быть, вы можете использовать ListView для загрузки элементов первого уровня, после нажатия загрузить второй уровень элементов на следующем экране.