欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 递归遍历json串获取相关数据

程序员文章站 2022-05-09 15:02:52
递归遍历json串获取相关数据 by:授客 QQ:1033553122 1. 测试数据 // 导航菜单 [ { id: 1, parentId: 0, parentName: null, name: "首页", url: "/home", perms: null, requireAuth: true ......

递归遍历json串获取相关数据

 

by:授客 qq1033553122

 

  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)

 

结果

JavaScript 递归遍历json串获取相关数据

 

 

 

  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)

 

结果

 JavaScript 递归遍历json串获取相关数据