Свести дерево маршрутов

Question

Я пытаюсь найти способ сгладить массив с помощью маршрутов (vanilla js) и дочерних маршрутов, чтобы получить массив с объектами того же уровня, но с их name и path Свойство основано на их "уровне".

Например, я бы хотел, чтобы name было что-то вроде dashboard.settings.user......., то же самое относится к path, чтобы объединить путь к "действительному".

Я пытался с рекурсивной функцией, но не могу понять, как отслеживать уровни ..

UPDATE:

var routesConfig = [
    {
        name: 'dashboard',
        path: '/dashboard',
        children: [
            {
                name: 'settings',
                path: '/settings',
                children: [
                    {
                        name: 'user',
                        path: '/user'
                    },
                    {
                        name: 'email',
                        path: '/email',
                        children: [
                            {
                                name: 'template',
                                path: '/template',
                                children: [
                                    {
                                        name: 'error',
                                        path: '/error'
                                    },
                                    {
                                        name: 'success',
                                        path: '/success'
                                    }
                                ],
                                name: 'lists',
                                path: '/lists',
                                children: [
                                    {
                                        name: 'signup',
                                        path: '/signup'
                                    },
                                    {
                                        name: 'newsletter',
                                        path: '/newsletter'
                                    }
                                ]
                            },
                            {
                                name: 'sender',
                                path: '/sender'
                            }
                        ]
                    }
                ]
            },
            {
                name: 'contact',
                path: '/contact',
                children: [
                    {
                        name: 'person',
                        path: '/person',
                        children: [
                            {
                                name: 'john',
                                path: '/john'
                            },
                            {
                                name: 'jane',
                                path: '/jane'
                            }
                        ]
                    }
                ]
            }
        ]
    },
]

flattenRoutes();

function flattenRoutes(){
    let routes = [];

    routesConfig.map(route => {
        const {name, path, children} = route;
        routes.push({name, path});

        if(children && children.length){
            iterateRouteChildren(route, routes, 1, []);
        }
    });

    console.log("routes", routes);
}

function iterateRouteChildren(parent, routes, depth, tree){
    for(let i = 0; i < parent.children.length; i++){
        let childRoute = parent.children[i];

        let name = childRoute.name;
        let path = childRoute.path;

        if(depth === 1){
            tree = [];
        }else{
            tree.push(childRoute.name)

        }

        routes.push({name, path, tree: tree.filter(Boolean).join('.')});

        if(childRoute.children && childRoute.children.length){
            iterateRouteChildren(childRoute, routes, depth + 1, tree);
        }

    }
}

ОБНОВЛЕНИЕ 2:

Исходя из решения Nina, я попросил способ сохранить исходные объекты / значения, но name и path должны быть переписаны в их «новые» значения, например, маршрут «email» должен иметь name читать: dashboard.settings.email и path переписать в: /dashboard/settings/email Так что изменяйте каждый объект и сохраняйте неизменными свойства (но сохраняйте его как плоский массив, так что нет вложенного дочернего массива).

ОБНОВЛЕНИЕ 3:

Чтобы попытаться уточнить. Мой вложенный routConfig будет содержать объекты со свойствами, такими как «имя», «путь», «некоторые другие свойства» и может «дети».

Я бы хотел сгладить все дерево, чтобы все было на одном уровне, но все дети должны переписать свои «имя» и «путь», исходя из того, насколько глубоко они лежат в дереве. Пример:

let result = [
    {
        name: 'dashboard',
        path: '/dashboard',
        id: 'my-dashboard-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings',
        path: '/dashboard/settings',
        id: 'my-settings-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.user',
        path: '/dashboard/settings/user',
        id: 'my-user-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.email',
        path: '/dashboard/settings/email',
        id: 'my-email-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.email.template',
        path: '/dashboard/settings/email/template',
        id: 'my-template-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.email.template.error',
        path: '/dashboard/settings/email/template.error',
        id: 'my-error-id',
        someotherprop: someothervalue
        ...
    },
    .....
]

Спасибо

Answer 1

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

function getFlat(array, n = '', p = '') {
    return array.reduce((r, { children = [], ...o }) => {
        var name = n + (n && '.') + o.name,
            path = p + o.path;
        return r.concat(Object.assign({}, o, { name, path }), getFlat(children, name, path));
    }, []);
}

var routes = [{ name: 'dashboard', path: '/dashboard', children: [{ name: 'settings', path: '/settings', children: [{ name: 'user', path: '/user' }, { name: 'email', path: '/email', children: [{ name: 'template', path: '/template', children: [{ name: 'error', path: '/error' }, { name: 'success', path: '/success' }] }, { name: 'lists', path: '/lists', children: [{ name: 'signup', path: '/signup' }, { name: 'newsletter', path: '/newsletter' }] }, { name: 'sender', path: '/sender' }] }] }, { name: 'contact', path: '/contact', children: [{ name: 'person', path: '/person', children: [{ name: 'john', path: '/john' }, { name: 'jane', path: '/jane' }] }] }] }],
    flat = getFlat(routes);

console.log(flat);

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