2017-08-29 238 views
1

我正在做一個VueJS,Lodash和Babel的項目,而我的問題是我需要在我的應用程序中填充一個邊欄從routes.js文件。問題是我真的不知道如何檢索我需要的數據。ES6從嵌套對象獲取屬性

export default [ 
    { 
    path: "/admin/login", 
    name: "admin.login", 
    component: Login 
    }, 
    { 
    path: "/admin", 
    component: MasterLayout, 
    meta: { auth: true }, 
    children: [ 
     { 
     path: "/admin/dashboard", 
     alias: "/", 
     menu: { text: "", icon: ""}, 
     name: "admin.dashboard", 
     component: DashboardIndex 
     } 
    ] 
    }, 
    { 
    path: '/403', 
    name: 'error.forbidden', 
    component: ErrorForbidden 
    }, 
    { 
    path: "*", 
    name: 'error.notfound', 
    component: ErrorPageNotFound 
    } 
]; 

這是我的路線文件,基本上,我需要遍歷每個路由,檢查是否有孩子菜單屬性,如果它有一個菜單將其添加到我的側邊欄的列表項目,它的孩子得到補充以及與自己菜單特性被撤出

最後我想獲得類似下面的

sidebarItems: [ 
{ 
    name: 'Dashboard', 
    icon: 'dashboard', 
    name: 'admin.dashboard' 
}, 
{ 
    name: 'OtherRoute', 
    icon: 'other-route', 
    name: 'admin.other-route', 
    children: [ 
    { 
     name: 'SubRoute', 
     icon: 'sub-route', 
     name: 'admin.sub' 
    } 
    ] 
} 
] 

這隻應該包含菜單屬性的路線。

+0

如何在同一對象可以有2'name'屬性? 'name:'Dashboard''和name:'admin.dashboard'例如 –

+0

@KoushikChatterjee它們是不同的對象,第一個是原始'routes.js'對象,另一個是在運行時從該初始對象生成的另一個對象 –

回答

0

你基本上需要遞歸迭代這個數組,所以請嘗試這個辦法:

function iterateArrayRoutes(routeArray) { 
    if(routeArray instanceof Array) { 
    var routeFormatted = routeArray.reduce(function(last, route){ 
     if (route.hasOwnProperty("menu")) { 
     var item = { 
      name: route.name, 
      icon: route.menu.icon 
     }; 
     if(route.hasOwnProperty("children") && route.children.length > 0) { 
      item.children = iterateArrayRoutes(route.children); 
     } 
     last.push(item); 
     } 
     return last; 
    }, []); 
    return routeFormatted; 
    } 
}; 

這裏有一個演示https://jsfiddle.net/vm1hrwLL/