JavaScript 遞歸遍歷json串獲取相關數據

遞歸遍歷json串獲取相關數據

 

by:授客 QQ：1033553122

 

1. 1.   測試數據

 

// 導航菜單

[

  {

    id: 1,

    parentId: 0,

    parentName: null,

    name: "首頁",

    url: "/home",

    perms: null,

    requireAuth: true,

    hidden: false,

    type: 0,

    icon: "fa fa-home fa-lg",a

    orderNum: 1,

    level: 0,

    children: [

      {

        id: 2,

        parentId: 1,

        parentName: null,

        name: "首頁二級菜單1",

        url: "",

        perms: null,

        requireAuth: true,

        hidden: false,

        type: 1,

        icon: "fa fa-home fa-lg",

        orderNum: 1,

        level: 0,

        children: [

          {

            id: 3,

            parentId: 2,

            parentName: null,

            name: "首頁三級菜單1",

            url: "",

            perms: null,

            requireAuth: true,

            hidden: false,

            type: 1,

            icon: "fa fa-home fa-lg",

            orderNum: 1,

            level: 0,

            children: [

              {

                id: 4,

                parentId: 3,

                parentName: null,

                name: "首頁四級菜單1",

                url: "/home/level4Menu1",

                perms: null,

                requireAuth: true,

                hidden: false,

                type: 0,

                icon: "fa fa-home fa-lg",

                orderNum: 1,

                level: 0,

                children: []

              }

            ]

          },

          {

            id: 5,

            parentId: 2,

            parentName: null,

            name: "首頁三級菜單2",

            url: "/home/level3Menu2",

            perms: null,

            requireAuth: true,

            hidden: false,

            type: 0,

            icon: "fa fa-home fa-lg",

            orderNum: 2,

            level: 0,

            children: []

          }

        ]

      },

      {

        id: 6,

        parentId: 1,

        parentName: null,

        name: "首頁二級菜單2",

        url: "",

        perms: null,

        requireAuth: true,

        hidden: false,

        type: 1,

        icon: "fa fa-home fa-lg",

        orderNum: 2,

        level: 0,

        children: [

          {

            id: 7,

            parentId: 6,

            parentName: null,

            name: "首頁三級菜單3",

            url: "/home/level3Menu3",

            perms: null,

            requireAuth: true,

            hidden: false,

            type: 0,

            icon: "fa fa-home fa-lg",

            orderNum: 1,

            level: 0,

            children: []

          }

        ]

      }

    ]

  },

  {

    id: 8,

    parentId: 0,

    parentName: null,

    name: "工做臺",

    url: "/workbench",

    perms: null,

    requireAuth: true,

    hidden: false,

    type: 0,

    icon: "fa fa-home fa-lg",

    orderNum: 2,

    level: 0,

    children: []

  },

  {

    id: 9,

    parentId: 0,

    parentName: null,

    name: "測試視圖",

    url: "/testerView",

    perms: null,

    requireAuth: true,

    hidden: false,

    type: 0,

    icon: "fa fa-home fa-lg",

    orderNum: 3,

    level: 0,

    children: [

      {

        id: 10,

        parentId: 9,

        parentName: null,

        name: "測試視圖二級菜單1",

        url: "",

        perms: null,

        requireAuth: true,

        hidden: false,

        type: 1,

        icon: "fa fa-home fa-lg",

        orderNum: 1,

        level: 0,

        children: [

          {

            id: 11,

            parentId: 10,

            parentName: null,

            name: "測試視圖三級菜單1",

            url: "/testerView/level3Menu1",

            requireAuth: true,

            hidden: false,

            type: 0,

            icon: "fa fa-home fa-lg",

            orderNum: 1,

            level: 0,

            children: []

          },

          {

            id: 12,

            parentId: 10,

            parentName: null,

            name: "測試視圖三級菜單2",

            url: "/testerView/level3Menu2",

            requireAuth: true,

            hidden: false,

            type: 0,

            icon: "fa fa-home fa-lg",

            orderNum: 2,

            level: 0,

            children: []

          }

        ]

      }

    ]

  },

  {

    id: 13,

    parentId: 0,

    parentName: null,

    name: "配置",

    url: "/settings",

    requireAuth: true,

    hidden: false,

    type: 0,

    icon: "fa fa-home fa-lg",

    orderNum: 4,

    level: 0,

    children: []

  },

  {

    id: 14,

    parentId: 0,

    parentName: null,

    name: "其它",

    url: "",

    requireAuth: true,

    hidden: false,

    type: 0,

    icon: "fa fa-home fa-lg",

    orderNum: 5,

    level: 0,

    children: [

      {

        id: 15,

        parentId: 14,

        parentName: null,

        name: "其它菜單",

        url: "/other",

        requireAuth: true,

        hidden: false,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 1,

        level: 0,

        children: []

      }

    ]

  }

]

 

 

 

 

1. 2.   需求1

獲取菜單「路由」信息：

獲取每級菜單的url,name,icon, id, requireAuth字段信息，構成節點，以及其子菜單對應字段的信息，構成子節點，要求：

若是本級菜單url爲空，則不記錄該級菜單相關的信息，此時，若是其子菜單url不爲空，則要記錄其子菜單相關字段的信息，並向上查找離該子菜單最近，而且url不爲空的菜單信息，並把該菜單信息當作其父節點，形如如下

[{path:"/home "，

name: "首頁"，

meta: {icon: "fa fa-home fa-lg", index: 4, requireAuth: true}，

children:[{path: "/home/level3Menu3", 

name: "首頁三級菜單3", 

meta: {icon: "fa fa-home fa-lg", index: 4, requireAuth: true},

children: []},

...

]

},

...

]

 

若是本級菜單url不爲空，則記錄該級菜單自身的信息，做爲父節點，此時，若是其子菜單url不爲空，則要記錄其子菜單相關字段的信息，構成子節點，不然不記錄子菜單信息

 

編碼

 

function getMenuRoutes(menuList = [], parent = []) {

  for (var i = 0; i < menuList.length; i++) {

    var route = {}

    if (menuList[i].url && /\S/.test(menuList[i].url)) {

      route = {

        path: menuList[i].url,

        name: menuList[i].name,

        children: [],

        meta: {

          icon: menuList[i].icon,

          index: menuList[i].id,

          requireAuth: menuList[i].requireAuth

        }

      }

      if (menuList[i].children && menuList[i].children.length >= 1) {

        getMenuRoutes(menuList[i].children, route["children"])

      }

    } else {

      if (menuList[i].children && menuList[i].children.length >= 1) {

        getMenuRoutes(menuList[i].children, parent)

      }

    }

    if (JSON.stringify(route) != "{}") {

      parent.push(route)

    }

  }

return parent

}

 

調用

    var result = getMenuRoutes(navMenuData, [])

    console.log(result)

 

結果

 

 

 

1. 3.   需求2

獲取每級菜單的url,name,icon, id, requireAuth字段信息，構成一級節點，要求：

若是級菜單url爲空，則不記錄該級菜單相關的信息

 

編碼

function getMenuRoutes (menuList = [], routes = []) {

  var temp = []

  for (var i = 0; i < menuList.length; i++) {

    var route = {}

    if (menuList[i].url && /\S/.test(menuList[i].url)) {

      var route = {

        path: menuList[i].url,

        name: menuList[i].name,

        children: [],

        meta: {

          icon: menuList[i].icon,

          index: menuList[i].id,

          requireAuth: menuList[i].requireAuth

        }

      }

      routes.push(route)

    }

 

    if (menuList[i].children && menuList[i].children.length >= 1) {

      temp = temp.concat(menuList[i].children)

    }

  }

  if (temp.length >= 1) {

    getDynamicRoutes2(temp, routes)

  }

 

  return routes

 

調用

    var result = getMenuRoutes(navMenuData, [])

    console.log(result)

 

結果