javascript рекурсивная многомерная задача

Question

У меня есть один массив разрешений, этот массив в точечном формате, я хочу отформатировать его для редактирования в виде дерева. Я преобразовал массив из нескольких циклов forEach, но из-за большого количества дочерних элементов я вернулся к формату рекурсии, на этот раз я не смог перейти к следующему разделу после поддеревьев. .

Мой форматированный массив:

var permArray = [
0: {id: 1, name: "auth.login"},
1: {id: 2, name: "dashboard.open"},
2: {id: 3, name: "account.view.others"},
3: {id: 4, name: "account.edit.roles"},
4: {id: 5, name: "account.delete.others"},
5: {id: 6, name: "menu.view.list"},
6: {id: 7, name: "developer.main.title"},
7: {id: 8, name: "developer.main.users"},
8: {id: 9, name: "developer.main.menu"},
9: {id: 10, name: "developer.main.roles"},
10: {id: 11, name: "users.have.branches"},
11: {id: 12, name: "add.users.branches"},
12: {id: 13, name: "edit.users.branches"},
13: {id: 14, name: "list.users.branches"},
14: {id: 15, name: "view.roles.manage.page"},
15: {id: 16, name: "view.users.manage.page"},
16: {id: 17, name: "view.menu.manage.page"},
17: {id: 18, name: "view.branch.products.manage.page"},
18: {id: 19, name: "view.branch.reports.manage.page"},
19: {id: 20, name: "sube.owned.list.product"},
20: {id: 21, name: "sube.owned.list.rapor"},
21: {id: 22, name: "branches.menu.title"},
22: {id: 23, name: "view.branches.menu.item"},
23: {id: 24, name: "users.state.edit"},
24: {id: 25, name: "isMultiLogin"},
25: {id: 26, name: "isViewSummaryAccount"},
26: {id: 27, name: "view.others.info"},
27: {id: 28, name: "addNewAccount"}
];

, и это моя последняя рекурсивная функция

function buildTree(perms, nodeIndex = 0, permIndex = 0) {
    var out = [],
        form = this.getForm(),
        tmpKeys = perms[permIndex].name.split(".");
    if (permIndex == perms.length - 1) {
        return out;
    } else {
        if (nodeIndex == tmpKeys.length - 1) {
            form.id = perms[permIndex].id;
            form.text = tmpKeys[nodeIndex];
            return form;
        } else {
            form.id = nodeIndex + "-" + permIndex;
            form.text = tmpKeys[nodeIndex];
            if (tmpKeys.length - 1 > nodeIndex) {
                if (!("children" in form))
                    form["children"] = [];

                form["children"].push( buildTree(perms, ++nodeIndex, permIndex) );
            }
            return form;
        }
    }
}

результат этой функции

{id: "0-0", текст: "auth", дети: [{id: 1, текст: "логин"}]}

но что я хочу сделать

[{
        id: "0-0",
        text: "auth",
        children: [{
            id: 1,
            text: "login"
        }]
    },
    {
        id: "0-1",
        text: "dashboard",
        children: [{
            id: 2,
            text: "open"
        }]
    },

    {
        id: "0-2",
        text: "account",
        children: [{
                id: "1-2",
                text: "view"
                children: [{
                    id: 3,
                    text: "others"
                }]
            },
            id: "1-3",
            text: "edit",
            children: [{
                id: 4,
                text: "roles"
            }]

        ]
    },...continue]

Answer 1

Вы можете использовать итеративный подход, используя расщепленный name для получения вложенных объектов.

Этот подход требует id, отличного от заданного для неизвестных узлов, но принимает id для отпуска узлы.

var array = [{ id: 1, name: "auth.login" }, { id: 2, name: "dashboard.open" }, { id: 3, name: "account.view.others" }, { id: 4, name: "account.edit.roles" }, { id: 5, name: "account.delete.others" }, { id: 6, name: "menu.view.list" }, { id: 7, name: "developer.main.title" }, { id: 8, name: "developer.main.users" }, { id: 9, name: "developer.main.menu" }, { id: 10, name: "developer.main.roles" }, { id: 11, name: "users.have.branches" }, { id: 12, name: "add.users.branches" }, { id: 13, name: "edit.users.branches" }, { id: 14, name: "list.users.branches" }, { id: 15, name: "view.roles.manage.page" }, { id: 16, name: "view.users.manage.page" }, { id: 17, name: "view.menu.manage.page" }, { id: 18, name: "view.branch.products.manage.page" }, { id: 19, name: "view.branch.reports.manage.page" }, { id: 20, name: "sube.owned.list.product" }, { id: 21, name: "sube.owned.list.rapor" }, { id: 22, name: "branches.menu.title" }, { id: 23, name: "view.branches.menu.item" }, { id: 24, name: "users.state.edit" }, { id: 25, name: "isMultiLogin" }, { id: 26, name: "isViewSummaryAccount" }, { id: 27, name: "view.others.info" }, { id: 28, name: "addNewAccount" }],
    result = array.reduce((r, { id, name }) => {
        name.split('.')
            .reduce((o, text, i, { length }) => {
                var temp = (o.children = o.children || []).find(q => q.text === text);
                if (!temp) o.children.push(temp = { id: i + 1 === length ? id : [i, id - 1].join('-'), text });
                return temp;
            }, { children: r });
        return r;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }