Angularjs JSON treeview, json format issue

Angularjs JSON treeview, json format issue

本文关键字：format issue json JSON treeview Angularjs      更新时间：2023-09-26

我正在尝试使用此插件实现 JSON 树视图

我的问题是这一行：

$scope.structure = { folders: [
{ name: 'Folder 1', files: [{ name: 'File 1.jpg' }, { name: 'File 2.png' }], folders: [
    { name: 'Subfolder 1', files: [{ name: 'Subfile 1' }] },
    { name: 'Subfolder 2' },
    { name: 'Subfolder 3' }
]},
{ name: 'Folder 2' }
]};

就我而言，我正在读取一个返回 JSON 格式的文件

[
    {
        "item": {
            "title": "Kids"
        }, 
        "children": [
            {
                "item": {
                    "title": "HELLO"
                }, 
                "children": []
            }
        ]
    }
]

我认为使用 JSON.parse(myFileContent) 应该足以拥有与$scope.structure相同的数据结构，但数据没有显示，我没有收到错误。

如何解析我的文件内容以使其正常工作？

首先，结构应该是一个对象，因为该指令将"文件夹"与"文件"区分开来。因此，考虑到您已经在 children 属性中定义了子元素，您可以将数组（假设它被称为 content）包装到一个对象中，如下所示：

$scope.structure = {
    "children": content
};

然后，需要重写指令将尝试在其中获取值的属性名称的默认值。

$scope.structureOptions = {
    foldersProperty: "children",
    displayProperty: "item.title"
};

最后，将 tree-view-options 属性添加到 HTML 元素。

<div tree-view="structure" tree-view-options="structureOptions"></div>
相关文章：