Estoy creando un menú de manera dinámica por medio de una función, esta función debe recibir como parámetro un JSON quien contendrá toda la estructura y jerarquías del menú, el problema que al momento de concatenar me dice que un elemento interno del JSON no lo reconoce.
Les voy a dejar el código, espero que alguien me pueda ayudar
function CrearMenu(caja, objeto) {
var esqueleto = '<nav clase="nav"><ul clase="Menu">';
var Primer_Nivel = Object.keys(objeto).length;
for (var i = 0; i <= Primer_Nivel; i++) {
esqueleto = esqueleto + '<li><a href="' + objeto[i].href + '">' + objeto[i].titulo + '</a></li>'
//alert(objeto[i]);
}
esqueleto = esqueleto + '</ul></nav>';
$(caja).append(esqueleto);
}
$(document).ready(function() {
var obj = [{
"titulo": "Fernando",
"href": "#",
"submenu": [{
"titulo": "Vannesa",
"href": "#",
"submenu": []
},
{
"titulo": "Martha",
"href": "#",
"submenu": []
},
{
"titulo": "Guiocasta",
"href": "#",
"submenu": [{
"titulo": "Karen",
"href": "#",
"submenu": []
},
{
"titulo": "Jessica",
"href": "#",
"submenu": []
}
]
}
]
},
{
"titulo": "Jennifer",
"href": "#",
"submenu": []
},
{
"titulo": "Lucia",
"href": "#",
"submenu": []
}
];
CrearMenu("#caja", obj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="caja">
</div>
El problema es que cuando lo ejecuto dice que href no esta definido y si lo quito me dice lo mismo pero con titulo.