javascript recursive multi dimensional problem

Question

I have one permission array, this array is in dotted format, I want to format it to edit it in tree view. I've converted the array from a few forEach loops, but due to the fact that there are a lot of children, I've returned to the recursion format, this time I couldn't move to the next section after the sub-trees.

My raw formatted array:

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

and this is my last recursive function

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

result from this function

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

but what i want to do

[{
        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]

what is the rule for ungiven id?

Nina Scholz
– Nina Scholz

2020-01-10 17:27:43 +00:00
Commented Jan 10, 2020 at 17:27 — Nina Scholz
– Nina Scholz, Commented Jan 10, 2020 at 17:27
just unique, no rule thank you for answering

m3T3HaN
– m3T3HaN

2020-01-10 18:32:18 +00:00
Commented Jan 10, 2020 at 18:32 — m3T3HaN
– m3T3HaN, Commented Jan 10, 2020 at 18:32

Nina Scholz · Accepted Answer · 2020-01-11 09:05:58Z

You could take an iterative approach by using the splitted name for getting nested objects.

This approach takes a different id than given for unknown nodes, but take the given id for leave nodes.

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

it's amazing, I've really worked hard. Thank you @NinaScholz

Collectives™ on Stack Overflow

javascript recursive multi dimensional problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related