用于从json菜单对象构建面包屑的递归函数

Posted 2021-03-30

所以我一直在努力绕过这个递归函数并获得正确的结果。

const _ = require('lodash');

let config = {
    "Main": {
        children: {
            "Dashboard": "main.dashboard",
            "Account": {
                children: {
                    "Settings": "main.account.settings"
                }
            }
        }
    },
    "Statistics": {
        children: {
            "Test One": "main.statistics.test.one",
            "Test Two": "main.statistics.test.two"
        }
    }
}

let processNav = (config, parent) => {
    let children;
    let results = {};

    _.forOwn(config, (value, title) => {
        var breadcrumb = parent || title;

        if (value.children) {
            children = processNav(value.children, breadcrumb);
            _.assign(results, children);
        } else {
            results[value] = [breadcrumb, title];
        }
    });

    return results;
};

let breadcrumbs = processNav(config);

console.log(breadcrumbs);

// output
{ 'main.dashboard': [ 'Main', 'Dashboard' ],
  'main.account.settings': [ 'Main', 'Settings' ],
  'main.statistics.test.two': [ 'Statistics', 'Test Two' ] }

我正在寻找的输出更像是......

// expected output
{ 'main.dashboard': [ 'Main', 'Dashboard' ],
  'main.account.settings': [ 'Main', 'Account', 'Settings' ],
  'main.statistics.test.one': [ 'Statistics', 'Test One' ],
  'main.statistics.test.two': [ 'Statistics', 'Test Two' ] }

在我发疯之前，有人能帮助我解决这个问题吗？

答案

这种方法不使用.lodash，只是简单的JS。

let config = {    "Main": {        children: {            "Dashboard": "main.dashboard",            "Account": {                children: {                    "Settings": "main.account.settings"                }            }        }    },    "Statistics": {        children: {            "Test One": "main.statistics.test.one",            "Test Two": "main.statistics.test.two"        }    }};

function loop(obj, path, breadcrumbs) {
  Object.keys(obj).forEach(k => {        
    if (obj[k].children) loop(obj[k].children, [...path, k], breadcrumbs);
    else breadcrumbs[obj[k]] = [...path, k];    
  });
}

let breadcrumbs  = {};
loop(config, [], breadcrumbs);

console.log(JSON.stringify(breadcrumbs, null, 2));

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

另一答案

主要困难是跳过children对象。因此，我在递归模式中包含了一个额外的案例。

如果当前“节点”具有children属性，它会通过立即调用下一个递归来“跳过”它：

isParent(obj) ? getPaths(obj.children, path, result) : /* ... * /

在行动：

const config={Main:{children:{Dashboard:"main.dashboard",Account:{children:{Settings:"main.account.settings"}}}},Statistics:{children:{"Test One":"main.statistics.test.one","Test Two":"main.statistics.test.two"}}};

const isParent = x => x.children;
const isLeaf = x => typeof x === "string";

const getPaths = (obj, path = [], result = {}) => 
  isParent(obj)
    // The "Skip" case:
    ? getPaths(obj.children, path, result)
    : isLeaf(obj)
      // The *final* case:
      ? Object.assign(result, { [obj]: path })
      // The *recurse* case:
      : Object.keys(obj).reduce(
      	(r, k) => getPaths(obj[k], path.concat(k), r),
        result);
        
console.log(getPaths(config));

以上是关于用于从json菜单对象构建面包屑的递归函数的主要内容，如果未能解决你的问题，请参考以下文章

JSON.stringify 深层对象

Vue.js怎样把递归组件构建为树形菜单

递归 JSON 模式

若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起

上下文菜单不适用于两个片段

PHP / MySQL 构建树形菜单