3

En el ejemplo coloco un json de prueba junto con el codigo que llevo.

Solo genero li pero no encuentro la manera de como generar ul.

var arrayjson = [
  {
    "id": 5,
    "nombre": "Electrica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 16,
        "nombre": "Termico",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 15,
        "nombre": "Relé",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 14,
        "nombre": "Contactores",
        "id_padre": 5,
        "status": true
      }
    ]
  },
  {
    "id": 6,
    "nombre": "Mecanica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 8,
        "nombre": "Motores",
        "id_padre": 6,
        "status": true
      }
    ]
  },
  {
    "id": 7,
    "nombre": "Sellos",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 9,
    "nombre": "Filtro",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 10,
        "nombre": "Filtro 0,22 U",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 11,
        "nombre": "Filtro Aceite",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 12,
        "nombre": "Filtro De Agua",
        "id_padre": 9,
        "status": true
      }
    ]
  },
  {
    "id": 13,
    "nombre": "Sensores",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 17,
    "nombre": "Croche",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 18,
        "nombre": "Ajustar",
        "id_padre": 17,
        "status": true
      },
      {
        "id": 19,
        "nombre": "Desajustar",
        "id_padre": 17,
        "status": true
      }
    ]
  },
  {
    "id": 20,
    "nombre": "Picos",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 21,
        "nombre": "Sujeción",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 23,
        "nombre": "Formacion",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 22,
        "nombre": "Altura",
        "id_padre": 20,
        "status": true
      }
    ]
  }
];

html=listado(arrayjson);
document.getElementById("listado").innerHTML=html;

function listado(array, l) {
  if ( l == undefined)
    l=0, html="";

  for (n in array) {
    html += "<li>"+array[n].nombre+"</li>\n";
    if (array[n].array) {
      listado(array[n].array, l+1);
    };
  };

  return html;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
----------------- lista generada por la funcion -----------------
<div id="listado"></div>
----------------- lista que espero obtener de la funcion -----------------
<div>
  <li>Electrica
    <ul>
      <li>Termico</li>
      <li>Relé</li>
      <li>Contactores</li>
    </ul>
  </li>
  <li>Mecanica
    <ul>
      <li>Motores</li>
    </ul>
  </li>
  <li>Sellos
  </li>
  <li>Filtro
    <ul>
      <li>Filtro 0,22 U</li>
      <li>Filtro Aceite</li>
      <li>Filtro De Agua</li>
    </ul>
  </li>
  <li>Sensores
  </li>
  <li>Croche
    <ul>
      <li>Ajustar</li>
      <li>Desajustar</li>
    </ul>
  </li>
  <li>Picos
    <ul>
      <li>Sujeción</li>
      <li>Formacion</li>
      <li>Altura</li>
    </ul>
  </li>
</div>

Quiero crear ul y li para mostrar/ocultar hijos, intentando imitar la siguiente lista: lista

6
  • el json que pusiste de ejemplo tiene solo dos dimensiones, el JSON real que usarás puede tener muchas? Commented el 13 may. 2017 a las 0:56
  • @RobertoSepúlvedaBravo Hay una función que lo ordena, ya edito el código.
    – bypabloc_
    Commented el 13 may. 2017 a las 1:26
  • @RobertoSepúlvedaBravo ya edite la pregunta con el json multidimensional.
    – bypabloc_
    Commented el 13 may. 2017 a las 1:30
  • ok, solo tiene tres dimensiones como máximo? Commented el 13 may. 2017 a las 2:20
  • @RobertoSepúlvedaBravo No, es ilimitado. El usuario registrada tantos niveles como quiera, por eso uso una función recursiva.
    – bypabloc_
    Commented el 13 may. 2017 a las 2:28

2 respuestas 2

1

Aquí te dejo un ejemplo que permite crear una lista desplegable usando los tag HTML <ul>...<li> partiendo del JSON que muestras, ademas incluye una rutina para mostrar u ocultar los sub-niveles de la lista, para esto uso jQuery y un poco de CSS y JavaScript.

var arrayjson = [
  {
    "id": 5,
    "nombre": "Electrica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 16,
        "nombre": "Termico",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 15,
        "nombre": "Relé",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 14,
        "nombre": "Contactores",
        "id_padre": 5,
        "status": true
      }
    ]
  },
  {
    "id": 6,
    "nombre": "Mecanica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 8,
        "nombre": "Motores",
        "id_padre": 6,
        "status": true
      }
    ]
  },
  {
    "id": 7,
    "nombre": "Sellos",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 9,
    "nombre": "Filtro",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 10,
        "nombre": "Filtro 0,22 U",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 11,
        "nombre": "Filtro Aceite",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 12,
        "nombre": "Filtro De Agua",
        "id_padre": 9,
        "status": true
      }
    ]
  },
  {
    "id": 13,
    "nombre": "Sensores",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 17,
    "nombre": "Croche",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 18,
        "nombre": "Ajustar",
        "id_padre": 17,
        "status": true
      },
      {
        "id": 19,
        "nombre": "Desajustar",
        "id_padre": 17,
        "status": true
      }
    ]
  },
  {
    "id": 20,
    "nombre": "Picos",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 21,
        "nombre": "Sujeción",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 23,
        "nombre": "Formacion",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 22,
        "nombre": "Altura",
        "id_padre": 20,
        "status": true
      }
    ]
  }
];

// Genera el Menu Tipo Lista:
html=menuList(arrayjson);

// Agrega el Menu Tipo Lista al DOM (usando jQuery):
$("#listado").html(html)

// agrega la clase "dropList" al Menu Tipo Lista:
.find("ul:first").addClass("dropList");

// crea la Lista Desplegable basado en la clase "dropList":
dropList();

// rutina para crear el Menú Tipo Lista (usando recursividad) 
function menuList(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].nombre;
  if (menu[n].array) {
   html += "\n"+menuList(menu[n].array, l+1, html)+sp+" ";
  };
  html += "</li>\n";
 }
 html += sp + "</ul>\n"
 return html;
}

// rutina para crear la Lista Desplegable (usando jQuery) 
function dropList() {
 $('.dropList').find('li:has(ul)') 
  .addClass('collapse')
  .click( function(e) {
   if (this == e.target) {
    $(this).toggleClass('expand');
    $(this).children('ul').toggle();
    e.stopPropagation();
   }
  })
  .children('ul').hide();
};
.dropList li {
 list-style: none;
 cursor: default;
 padding-left:20px;
 text-indent:-5px;
}
.dropList .collapse {
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNMTg0LjcsNDEzLjFsMi4xLTEuOGwxNTYuNS0xMzZjNS4zLTQuNiw4LjYtMTEuNSw4LjYtMTkuMmMwLTcuNy0zLjQtMTQuNi04LjYtMTkuMkwxODcuMSwxMDFsLTIuNi0yLjMgIEMxODIsOTcsMTc5LDk2LDE3NS44LDk2Yy04LjcsMC0xNS44LDcuNC0xNS44LDE2LjZoMHYyODYuOGgwYzAsOS4yLDcuMSwxNi42LDE1LjgsMTYuNkMxNzkuMSw0MTYsMTgyLjIsNDE0LjksMTg0LjcsNDEzLjF6Ii8+PC9zdmc+);
}
.dropList .expand {
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiLz48L3N2Zz4=);
}
.dropList .collapse,
.dropList .expand {
 cursor: pointer;
 background-repeat: no-repeat;
 background-position: -3px 0px;
 background-size: 16px 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
----------------- lista generada por la funcion -----------------
<div id="listado"></div>
----------------- lista que espero obtener de la funcion -----------------
<div>
  <li>Electrica
    <ul>
      <li>Termico</li>
      <li>Relé</li>
      <li>Contactores</li>
    </ul>
  </li>
  <li>Mecanica
    <ul>
      <li>Motores</li>
    </ul>
  </li>
  <li>Sellos
  </li>
  <li>Filtro
    <ul>
      <li>Filtro 0,22 U</li>
      <li>Filtro Aceite</li>
      <li>Filtro De Agua</li>
    </ul>
  </li>
  <li>Sensores
  </li>
  <li>Croche
    <ul>
      <li>Ajustar</li>
      <li>Desajustar</li>
    </ul>
  </li>
  <li>Picos
    <ul>
      <li>Sujeción</li>
      <li>Formacion</li>
      <li>Altura</li>
    </ul>
  </li>
</div>

3
  • Genial, gracias, mañana a primera hora lo implemento en mi sistema y te digo que tal me va.
    – bypabloc_
    Commented el 14 may. 2017 a las 4:22
  • ¿Crees que se pueda llevar a este fiddler?
    – bypabloc_
    Commented el 14 may. 2017 a las 4:25
  • @PabloContreras en internet podrás encontrar librerías que te permitirán hacer lo que quieres de manera elegante y con poco esfuerzo, tal es el caso de jsTree y jqTree una libreria open source que hace exactamente lo que quieres,
    – fwBasic
    Commented el 14 may. 2017 a las 6:10
1

Esto es lo que necesitas:

He agregado algunos elementos extra al último elemento de tu JSON, para comprobar que la función recursiva haga bien su trabajo:

Lo que hace es armar la lista para cada elemento que vaya encontrando, y si se encuentran más de 4 elementos (cuando exista el quinto elemento "array"), entonces se vuelve a llamar a sí misma para armar otra lista hija.

function recursiva(arreglo){
	for(var j=0; j<Object.keys(arreglo).length; j++){
		lista+="<ul>";
		lista+="<li>"+arreglo[j].id+"</li>";
		lista+="<li>"+arreglo[j].nombre+"</li>";
		lista+="<li>"+arreglo[j].id_padre+"</li>";
		lista+="<li>"+arreglo[j].status+"</li>";
		if(Object.keys(arreglo[j]).length > 4){
			recursiva(arreglo[j].array);
		}
		lista+="</ul>";
	}
}

var arrayjson = [
  {
    "id": 5,
    "nombre": "Electrica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 16,
        "nombre": "Termico",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 15,
        "nombre": "Relé",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 14,
        "nombre": "Contactores",
        "id_padre": 5,
        "status": true
      }
    ]
  },
  {
    "id": 6,
    "nombre": "Mecanica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 8,
        "nombre": "Motores",
        "id_padre": 6,
        "status": true
      }
    ]
  },
  {
    "id": 7,
    "nombre": "Sellos",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 9,
    "nombre": "Filtro",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 10,
        "nombre": "Filtro 0,22 U",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 11,
        "nombre": "Filtro Aceite",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 12,
        "nombre": "Filtro De Agua",
        "id_padre": 9,
        "status": true
      }
    ]
  },
  {
    "id": 13,
    "nombre": "Sensores",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 17,
    "nombre": "Croche",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 18,
        "nombre": "Ajustar",
        "id_padre": 17,
        "status": true
      },
      {
        "id": 19,
        "nombre": "Desajustar",
        "id_padre": 17,
        "status": true
      }
    ]
  },
  {
    "id": 20,
    "nombre": "Picos",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 21,
        "nombre": "Sujeción",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 23,
        "nombre": "Formacion",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 22,
        "nombre": "Altura",
        "id_padre": 20,
        "status": true,
        "array":[
        {
        	"id": 23,
	        "nombre": "Tengo",
	        "id_padre": 22,
	        "status": true,
	        "array":[
	        {
	        	"id": 24,
		        "nombre": "Muchas",
		        "id_padre": 23,
		        "status": true,
		        "array":[
		        {
		        	"id": 25,
			        "nombre": "Dimensiones",
			        "id_padre": 24,
			        "status": true
		        }
		        ]
	        }
	        ]
        }
        ]
      }
    ]
  }
];

var lista = "";

window.onload=function(){
	recursiva(arrayjson);
	document.getElementById("listado").innerHTML=lista;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="listado"></div>

Espero haberte ayudado. Estoy atento ante cualquier duda.

7
  • ¿Por que "ni tan recursiva"?
    – bypabloc_
    Commented el 13 may. 2017 a las 3:31
  • He editado la respuesta, está con JavaScript puro. Espero que se acomode a lo que necesitas. Commented el 13 may. 2017 a las 4:10
  • realmente es el mismo código que el mio, solo le agregaste el <ul> al principio y al final del for, cosa que no se me ocurrió, crei que saldría algo todo loco. Gracias :D
    – bypabloc_
    Commented el 13 may. 2017 a las 4:29
  • 1
    Un placer ayudarte. En la función recursiva puedes ordenar la lista a tu gusto, hacer que aparezca el nombre primero en lugar de la id, tal vez usar <select> + <option> para que puedas mostrar/ocultar los datos. Pero eso ya es harina de otro costal. Suerte. Commented el 13 may. 2017 a las 4:33
  • ¿Se puede adaptar a esto
    – bypabloc_
    Commented el 13 may. 2017 a las 4:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.