Javascript Nativescript-具有嵌套数据的转发器

我有一些来自外部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 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>

---

中继器

不适用于对象，因此您必须循环遍历

子对象

并将键值对转换为数组

然后，您必须构建一个自定义组件，该组件包含在一个转发器中，这样所有子元素都可以一个接一个地呈现

父组件

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

子组件

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

这是一本书

---

<强>注：如果你计划渲染这种数组的100s，那么你必须考虑遵循一种不同的方法来避免性能命中。可能您可以使用ListView加载第一级项目，点击下一屏幕中的加载第二级项目。

ListView将是更好的选择。我认为这将导致android（可能还有ios）出现异常，因为这里有很多嵌套布局。您好，谢谢。我知道这一点，但目前我只有@Manoj解决方案，我找不到更好的。谢谢@Manoj。我将对此进行深入测试，一些快速测试表明它是有效的。