How to determine the sublevels of an array? Using a recursive function

3

I have a table in the database in which I keep all the functions of my menu, it has the following columns:

table: functions / columns: id, father_id, icon, link, title

And I want to order the parents and children as I have registered in the db , this I want to do with a recursive function .

The problem lies in the fact that I do not know what level of subpart I am going, for example, when going through a 3rd submenu. I only go through each one of the items in an orderly manner but I have not yet determined that part (menu levels).

Here's what I have from the function:

var todoMenus;

function GenerarMenus(codigoMenu, esSub) {
  if(esSub){
    console.log('OPCION P');
  }else{
  	if(codigoMenu == 0){
    	console.log('OPCIONES PRINCIPALES');
    }else{
    	console.log('OPCION SUB');
    }
  }

  var menuGenerado = '';
  
  var menus = [];
  $.each(todoMenus, function (i, v) {
    if (v.id_padre == codigoMenu) {
      menus.push(v);
    }
  });
  
  if (menus.length != 0) {
  	console.log(menus);
  }

  if (menus != undefined) {
    $.each(menus, function (i, v) {
      console.log(v.titulo);
      
      if(v.id_padre == 0){
      	var esSub = true;
      }else{
      	var esSub = false;
      }
			
      var subMenu = GenerarMenus(v.id, esSub);
      if (subMenu.length == 0) {
      
      } else {
      
      }
    });
  }
  return menuGenerado;
}


var menujson = {
  "menu": [
  {
    "id": 1,
    "id_padre": 0,
    "icono": "fa fa-dashboard fa-fw",
    "link": "/",
    "titulo": "Tablero"
  },
  {
    "id": 2,
    "id_padre": 0,
    "icono": "fa fa-tasks fa-fw",
    "link": "#",
    "titulo": "Procesos"
  },
  {
    "id": 3,
    "id_padre": 2,
    "icono": "fa fa-list-ol fa-fw",
    "link": "/lotes",
    "titulo": "Lotes"
  },
  {
    "id": 4,
    "id_padre": 2,
    "icono": "fa fa-eraser fa-fw",
    "link": "/limpieza",
    "titulo": "Limpieza"
  },
  {
    "id": 5,
    "id_padre": 2,
    "icono": "fa fa-stop fa-fw",
    "link": "/paradasopera",
    "titulo": "Paradas"
  },
  {
    "id": 6,
    "id_padre": 2,
    "icono": "fa fa-wrench fa-fw",
    "link": "#",
    "titulo": "Mantenimiento"
  },
  {
    "id": 7,
    "id_padre": 6,
    "icono": "fa",
    "link": "/planes",
    "titulo": "Planes"
  },
  {
    "id": 8,
    "id_padre": 6,
    "icono": "fa",
    "link": "/calendario",
    "titulo": "Calendario"
  },
  {
    "id": 9,
    "id_padre": 0,
    "icono": "fa fa-file-text-o fa-fw",
    "link": "#",
    "titulo": "Reportes"
  },
  {
    "id": 10,
    "id_padre": 9,
    "icono": "fa fa-bar-chart-o fa-fw",
    "link": "/estadisticos",
    "titulo": "Estadisticos"
  },
  {
    "id": 11,
    "id_padre": 9,
    "icono": "fa fa-building-o fa-fw",
    "link": "/estaticos",
    "titulo": "Estaticos"
  },
  {
    "id": 12,
    "id_padre": 9,
    "icono": "fa fa-file fa-fw",
    "link": "/parametrizados",
    "titulo": "Parametrizados"
  },
  {
    "id": 13,
    "id_padre": 0,
    "icono": "fa fa-wrench fa-fw",
    "link": "#",
    "titulo": "Opciones"
  },
  {
    "id": 22,
    "id_padre": 13,
    "icono": "fa fa-industry fa-fw",
    "link": "#",
    "titulo": "Marcas de Equipos"
  },
  {
    "id": 23,
    "id_padre": 22,
    "icono": "fa",
    "link": "/marcas",
    "titulo": "Marcas"
  },
  {
    "id": 24,
    "id_padre": 22,
    "icono": "fa",
    "link": "/modelos",
    "titulo": "Modelos"
  },
  {
    "id": 32,
    "id_padre": 13,
    "icono": "fa fa-clock-o fa-fw",
    "link": "/turnos",
    "titulo": "Turnos"
  },
  {
    "id": 14,
    "id_padre": 13,
    "icono": "fa fa-flask fa-fw",
    "link": "#",
    "titulo": "Productos de Elaboración"
  },
  {
    "id": 25,
    "id_padre": 14,
    "icono": "fa",
    "link": "/productos",
    "titulo": "Productos"
  },
  {
    "id": 26,
    "id_padre": 14,
    "icono": "fa",
    "link": "/unidadesdemedicion",
    "titulo": "Unidades de Medición"
  },
  {
    "id": 15,
    "id_padre": 13,
    "icono": "fa fa-arrows-alt fa-fw",
    "link": "#",
    "titulo": "Areas y Procesos de Producción"
  },
  {
    "id": 30,
    "id_padre": 15,
    "icono": "fa",
    "link": "/areas",
    "titulo": "Areas"
  },
  {
    "id": 31,
    "id_padre": 15,
    "icono": "fa",
    "link": "/procesos",
    "titulo": "Procesos "
  },
  {
    "id": 16,
    "id_padre": 13,
    "icono": "fa fa-steam fa-fw",
    "link": "#",
    "titulo": "Registro de Equipos"
  },
  {
    "id": 27,
    "id_padre": 16,
    "icono": "fa",
    "link": "/equipos",
    "titulo": "Equipos"
  },
  {
    "id": 28,
    "id_padre": 16,
    "icono": "fa",
    "link": "/partes",
    "titulo": "Partes"
  },
  {
    "id": 29,
    "id_padre": 16,
    "icono": "fa",
    "link": "/subpartes",
    "titulo": "Subpartes"
  },
  {
    "id": 17,
    "id_padre": 13,
    "icono": "fa fa-user fa-fw",
    "link": "/personas",
    "titulo": "Personas"
  },
  {
    "id": 18,
    "id_padre": 0,
    "icono": "fa fa-gears fa-fw",
    "link": "#",
    "titulo": "Configuración"
  },
  {
    "id": 19,
    "id_padre": 18,
    "icono": "fa fa-users fa-fw",
    "link": "/usuarios",
    "titulo": "Usuarios"
  },
  {
    "id": 20,
    "id_padre": 18,
    "icono": "fa fa-suitcase fa-fw",
    "link": "/perfiles",
    "titulo": "Perfiles"
  },
  {
    "id": 21,
    "id_padre": 18,
    "icono": "fa fa-database fa-fw",
    "link": "/respaldo",
    "titulo": "Respaldo"
  }
  ]
};


$( document ).ready(function() {
  todoMenus = menujson.menu;
  var menuGenerado = GenerarMenus(0, false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

NOTE: The results are not printed in full in the esso fiddler console, they are displayed full in the browser.

    
asked by Pablo Contreras 26.04.2017 в 23:01
source

2 answers

4

The arrays that samples are flat so you can not determine sub levels , in any case the " id_padre " tells you the < em> sub level .

From the above I must understand that you want to order the arrays in sub levels given by the parent / children relationship, if this is correct Here is an example of how to do it:

var menujson = {
  "menu": [
  {
    "id": 1,
    "id_padre": 0,
    "icono": "fa fa-dashboard fa-fw",
    "link": "/",
    "titulo": "Tablero"
  },
  {
    "id": 2,
    "id_padre": 0,
    "icono": "fa fa-tasks fa-fw",
    "link": "#",
    "titulo": "Procesos"
  },
  {
    "id": 3,
    "id_padre": 2,
    "icono": "fa fa-list-ol fa-fw",
    "link": "/lotes",
    "titulo": "Lotes"
  },
  {
    "id": 4,
    "id_padre": 2,
    "icono": "fa fa-eraser fa-fw",
    "link": "/limpieza",
    "titulo": "Limpieza"
  },
  {
    "id": 5,
    "id_padre": 2,
    "icono": "fa fa-stop fa-fw",
    "link": "/paradasopera",
    "titulo": "Paradas"
  },
  {
    "id": 6,
    "id_padre": 2,
    "icono": "fa fa-wrench fa-fw",
    "link": "#",
    "titulo": "Mantenimiento"
  },
  {
    "id": 7,
    "id_padre": 6,
    "icono": "fa",
    "link": "/planes",
    "titulo": "Planes"
  },
  {
    "id": 8,
    "id_padre": 6,
    "icono": "fa",
    "link": "/calendario",
    "titulo": "Calendario"
  },
  {
    "id": 9,
    "id_padre": 0,
    "icono": "fa fa-file-text-o fa-fw",
    "link": "#",
    "titulo": "Reportes"
  },
  {
    "id": 10,
    "id_padre": 9,
    "icono": "fa fa-bar-chart-o fa-fw",
    "link": "/estadisticos",
    "titulo": "Estadisticos"
  },
  {
    "id": 11,
    "id_padre": 9,
    "icono": "fa fa-building-o fa-fw",
    "link": "/estaticos",
    "titulo": "Estaticos"
  },
  {
    "id": 12,
    "id_padre": 9,
    "icono": "fa fa-file fa-fw",
    "link": "/parametrizados",
    "titulo": "Parametrizados"
  },
  {
    "id": 13,
    "id_padre": 0,
    "icono": "fa fa-wrench fa-fw",
    "link": "#",
    "titulo": "Opciones"
  },
  {
    "id": 22,
    "id_padre": 13,
    "icono": "fa fa-industry fa-fw",
    "link": "#",
    "titulo": "Marcas de Equipos"
  },
  {
    "id": 23,
    "id_padre": 22,
    "icono": "fa",
    "link": "/marcas",
    "titulo": "Marcas"
  },
  {
    "id": 24,
    "id_padre": 22,
    "icono": "fa",
    "link": "/modelos",
    "titulo": "Modelos"
  },
  {
    "id": 32,
    "id_padre": 13,
    "icono": "fa fa-clock-o fa-fw",
    "link": "/turnos",
    "titulo": "Turnos"
  },
  {
    "id": 14,
    "id_padre": 13,
    "icono": "fa fa-flask fa-fw",
    "link": "#",
    "titulo": "Productos de Elaboración"
  },
  {
    "id": 25,
    "id_padre": 14,
    "icono": "fa",
    "link": "/productos",
    "titulo": "Productos"
  },
  {
    "id": 26,
    "id_padre": 14,
    "icono": "fa",
    "link": "/unidadesdemedicion",
    "titulo": "Unidades de Medición"
  },
  {
    "id": 15,
    "id_padre": 13,
    "icono": "fa fa-arrows-alt fa-fw",
    "link": "#",
    "titulo": "Areas y Procesos de Producción"
  },
  {
    "id": 30,
    "id_padre": 15,
    "icono": "fa",
    "link": "/areas",
    "titulo": "Areas"
  },
  {
    "id": 31,
    "id_padre": 15,
    "icono": "fa",
    "link": "/procesos",
    "titulo": "Procesos "
  },
  {
    "id": 16,
    "id_padre": 13,
    "icono": "fa fa-steam fa-fw",
    "link": "#",
    "titulo": "Registro de Equipos"
  },
  {
    "id": 27,
    "id_padre": 16,
    "icono": "fa",
    "link": "/equipos",
    "titulo": "Equipos"
  },
  {
    "id": 28,
    "id_padre": 16,
    "icono": "fa",
    "link": "/partes",
    "titulo": "Partes"
  },
  {
    "id": 29,
    "id_padre": 16,
    "icono": "fa",
    "link": "/subpartes",
    "titulo": "Subpartes"
  },
  {
    "id": 17,
    "id_padre": 13,
    "icono": "fa fa-user fa-fw",
    "link": "/personas",
    "titulo": "Personas"
  },
  {
    "id": 18,
    "id_padre": 0,
    "icono": "fa fa-gears fa-fw",
    "link": "#",
    "titulo": "Configuración"
  },
  {
    "id": 19,
    "id_padre": 18,
    "icono": "fa fa-users fa-fw",
    "link": "/usuarios",
    "titulo": "Usuarios"
  },
  {
    "id": 20,
    "id_padre": 18,
    "icono": "fa fa-suitcase fa-fw",
    "link": "/perfiles",
    "titulo": "Perfiles"
  },
  {
    "id": 21,
    "id_padre": 18,
    "icono": "fa fa-database fa-fw",
    "link": "/respaldo",
    "titulo": "Respaldo"
  }
  ]
};

function ordenar(j) {
 menu = { menu: [] };

 for (n in j.menu) {
  insertar(j.menu[n], 0, menu.menu);
 }
 return menu;
}

function insertar(j, l, menu) {
 for (n in menu) {
  if (menu[n].id == j.id_padre) {
   if (menu[n].menu == undefined)
    menu[n].menu = [];
   return menu[n].menu.push(j);
  } else {
   if (menu[n].menu)
    if (insertar(j, l+1, menu[n].menu))
     return true;
  }
 }
 if (l)
  return false;

 menu.push(j);
}

menu = ordenar(menujson);
console.log(menu);

Once ordered it will be easy to know the sub level where you are:

menu = {
  "menu": [
    {
      "id": 1,
      "id_padre": 0,
      "icono": "fa fa-dashboard fa-fw",
      "link": "/",
      "titulo": "Tablero"
    },
    {
      "id": 2,
      "id_padre": 0,
      "icono": "fa fa-tasks fa-fw",
      "link": "#",
      "titulo": "Procesos",
      "menu": [
        {
          "id": 3,
          "id_padre": 2,
          "icono": "fa fa-list-ol fa-fw",
          "link": "/lotes",
          "titulo": "Lotes"
        },
        {
          "id": 4,
          "id_padre": 2,
          "icono": "fa fa-eraser fa-fw",
          "link": "/limpieza",
          "titulo": "Limpieza"
        },
        {
          "id": 5,
          "id_padre": 2,
          "icono": "fa fa-stop fa-fw",
          "link": "/paradasopera",
          "titulo": "Paradas"
        },
        {
          "id": 6,
          "id_padre": 2,
          "icono": "fa fa-wrench fa-fw",
          "link": "#",
          "titulo": "Mantenimiento",
          "menu": [
            {
              "id": 7,
              "id_padre": 6,
              "icono": "fa",
              "link": "/planes",
              "titulo": "Planes"
            },
            {
              "id": 8,
              "id_padre": 6,
              "icono": "fa",
              "link": "/calendario",
              "titulo": "Calendario"
            }
          ]
        }
      ]
    },
    {
      "id": 9,
      "id_padre": 0,
      "icono": "fa fa-file-text-o fa-fw",
      "link": "#",
      "titulo": "Reportes",
      "menu": [
        {
          "id": 10,
          "id_padre": 9,
          "icono": "fa fa-bar-chart-o fa-fw",
          "link": "/estadisticos",
          "titulo": "Estadisticos"
        },
        {
          "id": 11,
          "id_padre": 9,
          "icono": "fa fa-building-o fa-fw",
          "link": "/estaticos",
          "titulo": "Estaticos"
        },
        {
          "id": 12,
          "id_padre": 9,
          "icono": "fa fa-file fa-fw",
          "link": "/parametrizados",
          "titulo": "Parametrizados"
        }
      ]
    },
    {
      "id": 13,
      "id_padre": 0,
      "icono": "fa fa-wrench fa-fw",
      "link": "#",
      "titulo": "Opciones",
      "menu": [
        {
          "id": 22,
          "id_padre": 13,
          "icono": "fa fa-industry fa-fw",
          "link": "#",
          "titulo": "Marcas de Equipos",
          "menu": [
            {
              "id": 23,
              "id_padre": 22,
              "icono": "fa",
              "link": "/marcas",
              "titulo": "Marcas"
            },
            {
              "id": 24,
              "id_padre": 22,
              "icono": "fa",
              "link": "/modelos",
              "titulo": "Modelos"
            }
          ]
        },
        {
          "id": 32,
          "id_padre": 13,
          "icono": "fa fa-clock-o fa-fw",
          "link": "/turnos",
          "titulo": "Turnos"
        },
        {
          "id": 14,
          "id_padre": 13,
          "icono": "fa fa-flask fa-fw",
          "link": "#",
          "titulo": "Productos de Elaboración",
          "menu": [
            {
              "id": 25,
              "id_padre": 14,
              "icono": "fa",
              "link": "/productos",
              "titulo": "Productos"
            },
            {
              "id": 26,
              "id_padre": 14,
              "icono": "fa",
              "link": "/unidadesdemedicion",
              "titulo": "Unidades de Medición"
            }
          ]
        },
        {
          "id": 15,
          "id_padre": 13,
          "icono": "fa fa-arrows-alt fa-fw",
          "link": "#",
          "titulo": "Areas y Procesos de Producción",
          "menu": [
            {
              "id": 30,
              "id_padre": 15,
              "icono": "fa",
              "link": "/areas",
              "titulo": "Areas"
            },
            {
              "id": 31,
              "id_padre": 15,
              "icono": "fa",
              "link": "/procesos",
              "titulo": "Procesos "
            }
          ]
        },
        {
          "id": 16,
          "id_padre": 13,
          "icono": "fa fa-steam fa-fw",
          "link": "#",
          "titulo": "Registro de Equipos",
          "menu": [
            {
              "id": 27,
              "id_padre": 16,
              "icono": "fa",
              "link": "/equipos",
              "titulo": "Equipos"
            },
            {
              "id": 28,
              "id_padre": 16,
              "icono": "fa",
              "link": "/partes",
              "titulo": "Partes"
            },
            {
              "id": 29,
              "id_padre": 16,
              "icono": "fa",
              "link": "/subpartes",
              "titulo": "Subpartes"
            }
          ]
        },
        {
          "id": 17,
          "id_padre": 13,
          "icono": "fa fa-user fa-fw",
          "link": "/personas",
          "titulo": "Personas"
        }
      ]
    },
    {
      "id": 18,
      "id_padre": 0,
      "icono": "fa fa-gears fa-fw",
      "link": "#",
      "titulo": "Configuración",
      "menu": [
        {
          "id": 19,
          "id_padre": 18,
          "icono": "fa fa-users fa-fw",
          "link": "/usuarios",
          "titulo": "Usuarios"
        },
        {
          "id": 20,
          "id_padre": 18,
          "icono": "fa fa-suitcase fa-fw",
          "link": "/perfiles",
          "titulo": "Perfiles"
        },
        {
          "id": 21,
          "id_padre": 18,
          "icono": "fa fa-database fa-fw",
          "link": "/respaldo",
          "titulo": "Respaldo"
        }
      ]
    }
  ]
};

html=niveles(menu.menu);
console.log(html);
document.getElementById("menu").innerHTML=html;

function niveles(menu, l) {
 if ( l == undefined)
  l=0;
  
 var sp = " ".repeat(l*2);
 html = sp + "<ul>\n"
 
 for (n in menu) {
  html += sp+" <li>"+menu[n].titulo;
  if (menu[n].menu) {
   html += "\n"+niveles(menu[n].menu, l+1, html)+sp+" ";
  };
  html += "</li>\n";
 }
 html += sp + "</ul>\n"
 return html;
}
<div id="menu"><div>

The following example shows you how to create a list of options:

menu = {
  "menu": [
    {
      "id": 1,
      "id_padre": 0,
      "icono": "fa fa-dashboard fa-fw",
      "link": "/",
      "titulo": "Tablero"
    },
    {
      "id": 2,
      "id_padre": 0,
      "icono": "fa fa-tasks fa-fw",
      "link": "#",
      "titulo": "Procesos",
      "menu": [
        {
          "id": 3,
          "id_padre": 2,
          "icono": "fa fa-list-ol fa-fw",
          "link": "/lotes",
          "titulo": "Lotes"
        },
        {
          "id": 4,
          "id_padre": 2,
          "icono": "fa fa-eraser fa-fw",
          "link": "/limpieza",
          "titulo": "Limpieza"
        },
        {
          "id": 5,
          "id_padre": 2,
          "icono": "fa fa-stop fa-fw",
          "link": "/paradasopera",
          "titulo": "Paradas"
        },
        {
          "id": 6,
          "id_padre": 2,
          "icono": "fa fa-wrench fa-fw",
          "link": "#",
          "titulo": "Mantenimiento",
          "menu": [
            {
              "id": 7,
              "id_padre": 6,
              "icono": "fa",
              "link": "/planes",
              "titulo": "Planes"
            },
            {
              "id": 8,
              "id_padre": 6,
              "icono": "fa",
              "link": "/calendario",
              "titulo": "Calendario"
            }
          ]
        }
      ]
    },
    {
      "id": 9,
      "id_padre": 0,
      "icono": "fa fa-file-text-o fa-fw",
      "link": "#",
      "titulo": "Reportes",
      "menu": [
        {
          "id": 10,
          "id_padre": 9,
          "icono": "fa fa-bar-chart-o fa-fw",
          "link": "/estadisticos",
          "titulo": "Estadisticos"
        },
        {
          "id": 11,
          "id_padre": 9,
          "icono": "fa fa-building-o fa-fw",
          "link": "/estaticos",
          "titulo": "Estaticos"
        },
        {
          "id": 12,
          "id_padre": 9,
          "icono": "fa fa-file fa-fw",
          "link": "/parametrizados",
          "titulo": "Parametrizados"
        }
      ]
    },
    {
      "id": 13,
      "id_padre": 0,
      "icono": "fa fa-wrench fa-fw",
      "link": "#",
      "titulo": "Opciones",
      "menu": [
        {
          "id": 22,
          "id_padre": 13,
          "icono": "fa fa-industry fa-fw",
          "link": "#",
          "titulo": "Marcas de Equipos",
          "menu": [
            {
              "id": 23,
              "id_padre": 22,
              "icono": "fa",
              "link": "/marcas",
              "titulo": "Marcas"
            },
            {
              "id": 24,
              "id_padre": 22,
              "icono": "fa",
              "link": "/modelos",
              "titulo": "Modelos"
            }
          ]
        },
        {
          "id": 32,
          "id_padre": 13,
          "icono": "fa fa-clock-o fa-fw",
          "link": "/turnos",
          "titulo": "Turnos"
        },
        {
          "id": 14,
          "id_padre": 13,
          "icono": "fa fa-flask fa-fw",
          "link": "#",
          "titulo": "Productos de Elaboración",
          "menu": [
            {
              "id": 25,
              "id_padre": 14,
              "icono": "fa",
              "link": "/productos",
              "titulo": "Productos"
            },
            {
              "id": 26,
              "id_padre": 14,
              "icono": "fa",
              "link": "/unidadesdemedicion",
              "titulo": "Unidades de Medición"
            }
          ]
        },
        {
          "id": 15,
          "id_padre": 13,
          "icono": "fa fa-arrows-alt fa-fw",
          "link": "#",
          "titulo": "Areas y Procesos de Producción",
          "menu": [
            {
              "id": 30,
              "id_padre": 15,
              "icono": "fa",
              "link": "/areas",
              "titulo": "Areas"
            },
            {
              "id": 31,
              "id_padre": 15,
              "icono": "fa",
              "link": "/procesos",
              "titulo": "Procesos "
            }
          ]
        },
        {
          "id": 16,
          "id_padre": 13,
          "icono": "fa fa-steam fa-fw",
          "link": "#",
          "titulo": "Registro de Equipos",
          "menu": [
            {
              "id": 27,
              "id_padre": 16,
              "icono": "fa",
              "link": "/equipos",
              "titulo": "Equipos"
            },
            {
              "id": 28,
              "id_padre": 16,
              "icono": "fa",
              "link": "/partes",
              "titulo": "Partes"
            },
            {
              "id": 29,
              "id_padre": 16,
              "icono": "fa",
              "link": "/subpartes",
              "titulo": "Subpartes"
            }
          ]
        },
        {
          "id": 17,
          "id_padre": 13,
          "icono": "fa fa-user fa-fw",
          "link": "/personas",
          "titulo": "Personas"
        }
      ]
    },
    {
      "id": 18,
      "id_padre": 0,
      "icono": "fa fa-gears fa-fw",
      "link": "#",
      "titulo": "Configuración",
      "menu": [
        {
          "id": 19,
          "id_padre": 18,
          "icono": "fa fa-users fa-fw",
          "link": "/usuarios",
          "titulo": "Usuarios"
        },
        {
          "id": 20,
          "id_padre": 18,
          "icono": "fa fa-suitcase fa-fw",
          "link": "/perfiles",
          "titulo": "Perfiles"
        },
        {
          "id": 21,
          "id_padre": 18,
          "icono": "fa fa-database fa-fw",
          "link": "/respaldo",
          "titulo": "Respaldo"
        }
      ]
    }
  ]
};

html=select1(menu.menu);
console.log(html);
document.getElementById("select1").innerHTML=html;

html=select2(menu.menu);
console.log(html);
document.getElementById("select2").innerHTML=html;

function select1(menu, l, pf) {
 if ( l == undefined)
  l=0, html="", pf="";
 
 for (n in menu) {
  html += "<option>"+pf+menu[n].titulo+"</option>\n";
  if (menu[n].menu) {
   select1(menu[n].menu, l+1, pf+menu[n].titulo+"/");
  };
 };

return html;
}
function select2(menu, l) {
 if ( l == undefined)
  l=0, html="", pf="";

 var sp="&nbsp;".repeat(l*6);
 var n1="";
 
 for (n in menu) {
  if (menu[n].menu || (n1 && menu[n1].menu)) {
   html += "<optgroup></optgroup>\n"
  };
  n1=n;
  html += "<option>"+sp+menu[n].titulo+"</option>\n";
  if (menu[n].menu) {
   select2(menu[n].menu, l+1);
  };
 };

return html;
}
<select id="select1"></select>
<select id="select2"></select>

All these examples illustrate how to work with recursion.

I hope this helps you, Greetings !! ...;))

    
answered by 27.04.2017 / 05:49
source
3

I think your code was part that I published last year, here is what you need, I hope it will be useful. Greetings.

var todoMenus;
var menus;
var menuNiveles;
$(document).ready(function(){
  todoMenus = menujson.menu;
  var menuGenerado = GenerarMenus(0, false);
  $("#main-nav").append(menuGenerado);
    //Si quieres pasar estos datos a un nuevo array:
  menuNiveles=[];  
  $.each($("li"),function(i,v){
    $(this).attr('data-idMenu', i+1);
    var nivel = $(this).parents('ul').length;
    var id = $(this).attr('id');
    $(this).attr("data-nivel",nivel);    
    var padre = $(this).parents('li').attr('data-idMenu');
    padre = padre == undefined ? 0 : padre;
    $(this).attr("title","Nivel:" + nivel);
    var texto = $(this).find("a:first").text();
    var link = $(this).find("a:first").attr('href');    
    var menuNivel = {
      "id": i+1,
      "idPadre": padre,
      "link": link,
      "menu": texto,
      "nivel": nivel
    };    
    //JSON rearmado... con los niveles
    menuNiveles.push(menuNivel);
  });  
  console.log(menuNiveles);  
});

function ObtenerMenus(codigoMenu) {
    menus = [];
    $.each(todoMenus, function (i, v) {
        if (v.id_padre == codigoMenu) {
            menus.push(v);
        }
    });
}
function GenerarMenus(codigoMenu, esSub) {
    var menuGenrado = '';
    if (esSub) {
        menuGenrado = '<ul class="nav nav-stacked">';
    }
    else {
        menuGenrado = '<ul class="nav nav-stacked">';
    }
    ObtenerMenus(codigoMenu);

    if (menus != undefined) {
        $.each(menus, function (i, v) {            
                var subMenu = GenerarMenus(v.id, true);
                if (subMenu.length == 0) {
                    menuGenrado += '<li class=""><a href="' + v.link + '"><i class="' + v.icono + '"></i><span>' + v.titulo + '</span></a>';
                } else {
                    menuGenrado += '<li class=""><a href="' + v.link + '" class="dropdown-collapse"><i class="' + v.icono + '"></i><span>' + v.titulo + '</span><i class="icon-angle-down angle-down"></i></a>';
                    menuGenrado += subMenu;
                }
                menuGenrado += '</li>';            
        });
    }
    menuGenrado += '</ul>'
    if (menuGenrado == '<ul class="nav nav-stacked"></ul>' || menuGenrado == '<ul class="nav nav-stacked"></ul>') {
        menuGenrado = '';
    }
    return menuGenrado;
}

var menujson = {
  "menu": [
  {
    "id": 1,
    "id_padre": 0,
    "icono": "fa fa-dashboard fa-fw",
    "link": "/",
    "titulo": "Tablero"
  },
  {
    "id": 2,
    "id_padre": 0,
    "icono": "fa fa-tasks fa-fw",
    "link": "#",
    "titulo": "Procesos"
  },
  {
    "id": 3,
    "id_padre": 2,
    "icono": "fa fa-list-ol fa-fw",
    "link": "/lotes",
    "titulo": "Lotes"
  },
  {
    "id": 4,
    "id_padre": 2,
    "icono": "fa fa-eraser fa-fw",
    "link": "/limpieza",
    "titulo": "Limpieza"
  },
  {
    "id": 5,
    "id_padre": 2,
    "icono": "fa fa-stop fa-fw",
    "link": "/paradasopera",
    "titulo": "Paradas"
  },
  {
    "id": 6,
    "id_padre": 2,
    "icono": "fa fa-wrench fa-fw",
    "link": "#",
    "titulo": "Mantenimiento"
  },
  {
    "id": 7,
    "id_padre": 6,
    "icono": "fa",
    "link": "/planes",
    "titulo": "Planes"
  },
  {
    "id": 8,
    "id_padre": 6,
    "icono": "fa",
    "link": "/calendario",
    "titulo": "Calendario"
  },
  {
    "id": 9,
    "id_padre": 0,
    "icono": "fa fa-file-text-o fa-fw",
    "link": "#",
    "titulo": "Reportes"
  },
  {
    "id": 10,
    "id_padre": 9,
    "icono": "fa fa-bar-chart-o fa-fw",
    "link": "/estadisticos",
    "titulo": "Estadisticos"
  },
  {
    "id": 11,
    "id_padre": 9,
    "icono": "fa fa-building-o fa-fw",
    "link": "/estaticos",
    "titulo": "Estaticos"
  },
  {
    "id": 12,
    "id_padre": 9,
    "icono": "fa fa-file fa-fw",
    "link": "/parametrizados",
    "titulo": "Parametrizados"
  },
  {
    "id": 13,
    "id_padre": 0,
    "icono": "fa fa-wrench fa-fw",
    "link": "#",
    "titulo": "Opciones"
  },
  {
    "id": 22,
    "id_padre": 13,
    "icono": "fa fa-industry fa-fw",
    "link": "#",
    "titulo": "Marcas de Equipos"
  },
  {
    "id": 23,
    "id_padre": 22,
    "icono": "fa",
    "link": "/marcas",
    "titulo": "Marcas"
  },
  {
    "id": 24,
    "id_padre": 22,
    "icono": "fa",
    "link": "/modelos",
    "titulo": "Modelos"
  },
  {
    "id": 32,
    "id_padre": 13,
    "icono": "fa fa-clock-o fa-fw",
    "link": "/turnos",
    "titulo": "Turnos"
  },
  {
    "id": 14,
    "id_padre": 13,
    "icono": "fa fa-flask fa-fw",
    "link": "#",
    "titulo": "Productos de Elaboración"
  },
  {
    "id": 25,
    "id_padre": 14,
    "icono": "fa",
    "link": "/productos",
    "titulo": "Productos"
  },
  {
    "id": 26,
    "id_padre": 14,
    "icono": "fa",
    "link": "/unidadesdemedicion",
    "titulo": "Unidades de Medición"
  },
  {
    "id": 15,
    "id_padre": 13,
    "icono": "fa fa-arrows-alt fa-fw",
    "link": "#",
    "titulo": "Areas y Procesos de Producción"
  },
  {
    "id": 30,
    "id_padre": 15,
    "icono": "fa",
    "link": "/areas",
    "titulo": "Areas"
  },
  {
    "id": 31,
    "id_padre": 15,
    "icono": "fa",
    "link": "/procesos",
    "titulo": "Procesos "
  },
  {
    "id": 16,
    "id_padre": 13,
    "icono": "fa fa-steam fa-fw",
    "link": "#",
    "titulo": "Registro de Equipos"
  },
  {
    "id": 27,
    "id_padre": 16,
    "icono": "fa",
    "link": "/equipos",
    "titulo": "Equipos"
  },
  {
    "id": 28,
    "id_padre": 16,
    "icono": "fa",
    "link": "/partes",
    "titulo": "Partes"
  },
  {
    "id": 29,
    "id_padre": 16,
    "icono": "fa",
    "link": "/subpartes",
    "titulo": "Subpartes"
  },
  {
    "id": 17,
    "id_padre": 13,
    "icono": "fa fa-user fa-fw",
    "link": "/personas",
    "titulo": "Personas"
  },
  {
    "id": 18,
    "id_padre": 0,
    "icono": "fa fa-gears fa-fw",
    "link": "#",
    "titulo": "Configuración"
  },
  {
    "id": 19,
    "id_padre": 18,
    "icono": "fa fa-users fa-fw",
    "link": "/usuarios",
    "titulo": "Usuarios"
  },
  {
    "id": 20,
    "id_padre": 18,
    "icono": "fa fa-suitcase fa-fw",
    "link": "/perfiles",
    "titulo": "Perfiles"
  },
  {
    "id": 21,
    "id_padre": 18,
    "icono": "fa fa-database fa-fw",
    "link": "/respaldo",
    "titulo": "Respaldo"
  }
  ]
};
/*
* --------------------------------------------------------------------------------------------------------------------
* main navigation toggling
* --------------------------------------------------------------------------------------------------------------------
*/

(function() {
  $(document).ready(function() {
    var body, click_event, content, nav, nav_toggler;
    nav_toggler = $("header .toggle-nav");
    nav = $("#main-nav");
    content = $("#content");
    body = $("body");
    click_event = (jQuery.support.touch ? "tap" : "click");
    $("#main-nav .dropdown-collapse").on(click_event, function(e) {
      var link, list;
      e.preventDefault();
      link = $(this);
      list = link.parent().find("> ul");
      if (list.is(":visible")) {
        if (body.hasClass("main-nav-closed") && link.parents("li").length === 1) {
          false;
        } else {
          link.removeClass("in");
          list.slideUp(300, function() {
            return $(this).removeClass("in");
          });
        }
      } else {
        if (list.parents("ul.nav.nav-stacked").length === 1) {
          $(document).trigger("nav-open");
        }
        link.addClass("in");
        list.slideDown(300, function() {
          return $(this).addClass("in");
        });
      }
      return false;
    });
    if (jQuery.support.touch) {
      nav.on("swiperight", function(e) {
        return $(document).trigger("nav-open");
      });
      nav.on("swipeleft", function(e) {
        return $(document).trigger("nav-close");
      });
    }
    nav_toggler.on(click_event, function() {
      if (nav_open()) {
        $(document).trigger("nav-close");
      } else {
        $(document).trigger("nav-open");
      }
      return false;
    });
    $(document).bind("nav-close", function(event, params) {
      var nav_open;
      body.removeClass("main-nav-opened").addClass("main-nav-closed");
      return nav_open = false;
    });
    return $(document).bind("nav-open", function(event, params) {
      var nav_open;
      body.addClass("main-nav-opened").removeClass("main-nav-closed");
      return nav_open = true;
    });
  });

  this.nav_open = function() {
    return $("body").hasClass("main-nav-opened") || $("#main-nav").width() > 50;
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * plugin initializations
  * --------------------------------------------------------------------------------------------------------------------
  */

  $(document).ready(function() {
    var touch;
    setTimeAgo();
    setScrollable();
    setSortable($(".sortable"));
    setSelect2();
    setAutoSize();
    setCharCounter();
    setMaxLength();
    setValidateForm();
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * removes .box after click on .box-remove button
    * --------------------------------------------------------------------------------------------------------------------
    */

    $(".box .box-remove").on("click", function(e) {
      $(this).parents(".box").first().remove();
      e.preventDefault();
      return false;
    });
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * collapse .box after click on .box-collapse button
    * --------------------------------------------------------------------------------------------------------------------
    */

    $(".box .box-collapse").on("click", function(e) {
      var box;
      box = $(this).parents(".box").first();
      box.toggleClass("box-collapsed");
      e.preventDefault();
      return false;
    });
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * password strength
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (jQuery().pwstrength) {
      $('.pwstrength').pwstrength({
        showVerdicts: false
      });
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * check all checkboxes in table with class only-checkbox
    * --------------------------------------------------------------------------------------------------------------------
    */

    $(".check-all").on("click", function(e) {
      return $(this).parents("table:eq(0)").find(".only-checkbox :checkbox").attr("checked", this.checked);
    });
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * setting up responsive tabs
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (jQuery().tabdrop) {
      $('.nav-responsive.nav-pills, .nav-responsive.nav-tabs').tabdrop();
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * setting up datatables
    * --------------------------------------------------------------------------------------------------------------------
    */

    setDataTable($(".data-table"));
    setDataTable($(".data-table-column-filter"));
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * setting up basic wysiwyg
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (jQuery().wysihtml5) {
      $('.wysihtml5').wysihtml5();
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * setting up sortable list
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (jQuery().nestable) {
      $('.dd-nestable').nestable();
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * affixing main navigation
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (!$("body").hasClass("fixed-header")) {
      if (jQuery().affix) {
        $('#main-nav.main-nav-fixed').affix({
          offset: 40
        });
      }
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * setting up bootstrap popovers
    * --------------------------------------------------------------------------------------------------------------------
    */

    touch = false;
    if (window.Modernizr) {
      touch = Modernizr.touch;
    }
    if (!touch) {
      $("body").on("mouseenter", ".has-popover", function() {
        var el;
        el = $(this);
        if (el.data("popover") === undefined) {
          el.popover({
            placement: el.data("placement") || "top",
            container: "body"
          });
        }
        return el.popover("show");
      });
      $("body").on("mouseleave", ".has-popover", function() {
        return $(this).popover("hide");
      });
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * setting up bootstrap tooltips
    * --------------------------------------------------------------------------------------------------------------------
    */

    touch = false;
    if (window.Modernizr) {
      touch = Modernizr.touch;
    }
    if (!touch) {
      $("body").on("mouseenter", ".has-tooltip", function() {
        var el;
        el = $(this);
        if (el.data("tooltip") === undefined) {
          el.tooltip({
            placement: el.data("placement") || "top",
            container: "body"
          });
        }
        return el.tooltip("show");
      });
      $("body").on("mouseleave", ".has-tooltip", function() {
        return $(this).tooltip("hide");
      });
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * replacing svg images for png fallback
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (window.Modernizr && Modernizr.svg === false) {
      $("img[src*=\"svg\"]").attr("src", function() {
        return $(this).attr("src").replace(".svg", ".png");
      });
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * color pickers
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (jQuery().colorpicker) {
      $(".colorpicker-hex").colorpicker({
        format: "hex"
      });
      $(".colorpicker-rgb").colorpicker({
        format: "rgb"
      });
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * datetimepickers
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (jQuery().datetimepicker) {
      $(".datetimepicker-input").datetimepicker({
        icons: {
          time: "icon-time",
          date: "icon-calendar",
          up: "icon-arrow-up",
          down: "icon-arrow-down"
        }
      });
      $(".datepicker-input").datetimepicker({
        pickTime: false,
        icons: {
          time: "icon-time",
          date: "icon-calendar",
          up: "icon-arrow-up",
          down: "icon-arrow-down"
        }
      });
      $(".timepicker-input").datetimepicker({
        pickDate: false,
        icons: {
          time: "icon-time",
          date: "icon-calendar",
          up: "icon-arrow-up",
          down: "icon-arrow-down"
        }
      });
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * setting bootstrap file input
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (jQuery().bootstrapFileInput) {
      $('input[type=file]').bootstrapFileInput();
    }
    /*
    * --------------------------------------------------------------------------------------------------------------------
    * modernizr fallbacks
    * --------------------------------------------------------------------------------------------------------------------
    */

    if (window.Modernizr) {
      if (!Modernizr.input.placeholder) {
        $("[placeholder]").focus(function() {
          var input;
          input = $(this);
          if (input.val() === input.attr("placeholder")) {
            input.val("");
            return input.removeClass("placeholder");
          }
        }).blur(function() {
          var input;
          input = $(this);
          if (input.val() === "" || input.val() === input.attr("placeholder")) {
            input.addClass("placeholder");
            return input.val(input.attr("placeholder"));
          }
        }).blur();
        return $("[placeholder]").parents("form").submit(function() {
          return $(this).find("[placeholder]").each(function() {
            var input;
            input = $(this);
            if (input.val() === input.attr("placeholder")) {
              return input.val("");
            }
          });
        });
      }
    }
  });

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * max length counter
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setMaxLength = function(selector) {
    if (selector == null) {
      selector = $(".char-max-length");
    }
    if (jQuery().maxlength) {
      return selector.maxlength();
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * character counter
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setCharCounter = function(selector) {
    if (selector == null) {
      selector = $(".char-counter");
    }
    if (jQuery().charCount) {
      return selector.charCount({
        allowed: selector.data("char-allowed"),
        warning: selector.data("char-warning"),
        cssWarning: "text-warning",
        cssExceeded: "text-error"
      });
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * autosize feature for expanding textarea elements
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setAutoSize = function(selector) {
    if (selector == null) {
      selector = $(".autosize");
    }
    if (jQuery().autosize) {
      return selector.autosize();
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * timeago feature converts static time to dynamically refreshed
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setTimeAgo = function(selector) {
    if (selector == null) {
      selector = $(".timeago");
    }
    if (jQuery().timeago) {
      jQuery.timeago.settings.allowFuture = true;
      jQuery.timeago.settings.refreshMillis = 60000;
      selector.timeago();
      return selector.addClass("in");
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * scrollable boxes
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setScrollable = function(selector) {
    if (selector == null) {
      selector = $(".scrollable");
    }
    if (jQuery().slimScroll) {
      return selector.each(function(i, elem) {
        return $(elem).slimScroll({
          height: $(elem).data("scrollable-height"),
          start: $(elem).data("scrollable-start") || "top"
        });
      });
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * jquery ui sortable
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setSortable = function(selector) {
    if (selector == null) {
      selector = null;
    }
    if (jQuery().sortable) {
      if (selector) {
        return selector.sortable({
          axis: selector.data("sortable-axis"),
          connectWith: selector.data("sortable-connect")
        });
      }
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * select 2 selects
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setSelect2 = function(selector) {
    if (selector == null) {
      selector = $(".select2");
    }
    if (jQuery().select2) {
      return selector.each(function(i, elem) {
        return $(elem).select2();
      });
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * datatables
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setDataTable = function(selector) {
    if (jQuery().dataTable) {
      return selector.each(function(i, elem) {
        var dt, sdom;
        if ($(elem).data("pagination-top-bottom") === true) {
          sdom = "<'row datatables-top'<'col-sm-6'l><'col-sm-6 text-right'pf>r>t<'row datatables-bottom'<'col-sm-6'i><'col-sm-6 text-right'p>>";
        } else if ($(elem).data("pagination-top") === true) {
          sdom = "<'row datatables-top'<'col-sm-6'l><'col-sm-6 text-right'pf>r>t<'row datatables-bottom'<'col-sm-6'i><'col-sm-6 text-right'>>";
        } else {
          sdom = "<'row datatables-top'<'col-sm-6'l><'col-sm-6 text-right'f>r>t<'row datatables-bottom'<'col-sm-6'i><'col-sm-6 text-right'p>>";
        }
        dt = $(elem).dataTable({
          sDom: sdom,
          sPaginationType: "bootstrap",
          "iDisplayLength": $(elem).data("pagination-records") || 10,
          oLanguage: {
            sLengthMenu: "_MENU_ registros por página"
          },
          fnDrawCallback: function(oSettings) {
            $(this).closest('.dataTables_wrapper').find('div[id$=_filter] input').css("width", "200px");
            return $(this).closest('.dataTables_wrapper').find('div[id$=_filter] input').addClass("form-control input-sm").attr('placeholder', $(this).closest('.dataTables_wrapper').find('div[id$=_filter] label').text().replace(":", "..."));
          }
        });
        if ($(elem).hasClass("data-table-column-filter")) {
          return dt.columnFilter();
        }
      });
    }
  };

  /*
  * --------------------------------------------------------------------------------------------------------------------
  * form validation
  * --------------------------------------------------------------------------------------------------------------------
  */

  this.setValidateForm = function(selector) {
    if (selector == null) {
      selector = $(".validate-form");
    }
    if (jQuery().validate) {
      return selector.each(function(i, elem) {
        return $(elem).validate({
          errorElement: "span",
          errorClass: "help-block has-error",
          errorPlacement: function(e, t) {
            return t.parents(".controls").first().append(e);
          },
          highlight: function(e) {
            return $(e).closest('.form-group').removeClass("has-error has-success").addClass('has-error');
          },
          success: function(e) {
            return e.closest(".form-group").removeClass("has-error");
          }
        });
      });
    }
  };
}).call(this);
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<html>
<head><title>titulo</title></head>
<body>
<div id="content">
<div id="main-nav"></div>
</div>
</body>
</html>

Update The example of how it works. It is a matter of adding the css to format it.

    
answered by 27.04.2017 в 01:01