将 List 转换为嵌套对象树

Question

我正在使用 Angular 并希望在 html 中显示这样的嵌套文件夹树：

<div id="tree">
    <ul>
        <li ng-repeat='folder in folderList' ng-include="'/templates/tree-renderer.html'"  id="{{ folder.htmlId }}">
        </li>
    </ul>
</div>

在 tree-renderer.html 我有：

<a href='/#/folders{{ folder.link.href }}'>
    <span>{{folder.name}} 
        <small>{{ folder.nbDocIn }}
        </small>
    </span>
</a>
<ul>
    <li ng-repeat="folder in folder.children" ng-include="'/templates/tree-renderer.html'">
    </li>
</ul>

由于每次修改某些内容时都需要完成一个 Rest 请求，我得到了结果，所以我希望我的以下代码更快。

我从 Rest 请求中收到这样的 json：

        {
            "key": "folder1"
        },
        {
            "key": "folder2"
        },
        {
            "key": "folder1/subFolder1"
        },
        {
            "key": "folder2/subFolder2"
        },
        {
            "key": "folder1/subFolder2"
        },
        {
            "key": "folder2/subFolder2/subSubFolder2"
        }

并不是说列表没有必要排序。 正如您在 html 中看到的，我现在需要将此列表转换为以下列表：

        {
            "key": "folder1",
             "children": [{
                    "key": "folder1/subFolder1"
              }, {
                    "key": "folder1/subFolder2"
              }]
        },{
            "key": "folder2",
             "children": [{
                    "key": "folder2/subFolder1",
                    "children": [{
                         "key": "folder2/subFolder1/subSubFolder2"
                    }]
              }]
        }

现在我需要两个递归函数来实现它，一个创建子数组，另一个将这些数组放入属性 children

我想做一个，你有什么想法吗？

Answer 1

基本上，从服务器端制作结构化列表比在客户端制作结构化列表更好。

但在您的情况下，您需要识别每个元素的父亲（文件夹）并将它们放置在正确的项目中。所以你不需要递归。

功能代码：（2个功能：结构化和渲染）

var list = [{
        key: 'folder1'
    },{
        key: 'folder2'
    },{
        key: "folder1/subFolder1"
    },{
        key: "folder2/subFolder2"
    },{
        key: "folder1/subFolder3"
    },{
        key: "folder2/subFolder2/subSubFolder2"
    }];
    $('body').ready(function(){
        ord_list = construct_ord_list(list);
        construct_html(ord_list);
    });
    var construct_ord_list = function(list){
        var finished = false;
        var running = true;
    // Construct a list with a father property for each items
        var res = [];
        for(i in list)
            res.push({  key: list[i].key,   father: ''});
    // Identifying fathers
        while (!finished){
            if (!running)
                finished = true;
            running = false;
            for(i in res)
                if(res[i].key.indexOf('/') > -1){
                    running = true;
    // father recepts the left side of key value from '/'
                    res[i].father = res[i].key.substring(0,res[i].key.indexOf('/'));
    // key recepts the right side of key value from '/'
                    res[i].key = res[i].key.substring(res[i].key.indexOf('/')+1,res[i].key.length);
                }
        }
        return res;
    }
    var construct_html = function(list){
        var text = '<ul>';
        for(i in list)
            if(list[i].father == '')
                text += '<li id="item_'+list[i].key+'">'+list[i].key+'<ul class="children"></ul></li>';
        $('body').append(text+'</ul>');
        for(i in list)
            if(list[i].father != '')
                $('#item_'+list[i].father).find('.children').first().append('<li id="item_'+list[i].key+'">'+list[i].key+'<ul class="children"></ul></li>');
    }

显然 JQuery 不是必需的，但允许更易读的代码...

如果你真的想要一个由 javascript 构成的树，这两个函数会帮助你：（只有一个递归）

    var construct_tree = function(list){
        var res = [];
        for(i in list)
            if(list[i].father == '')
                res.push({  key: list[i].key,   children:   []});
        for(i in list)
            if(list[i].father != '')
                insert_child(res,list[i]);
        return res;
    }
    var insert_child = function(list,elmt){
        for(i in list)
            if (list[i].key == elmt.father)
                list[i].children.push({ key: list[i].key,   children:   []});
            else if (list[i].children.length > 0)
                insert_child(list[i].children,elmt);
    }