How to mount this menu dynamically using json? Let him be assembled according to the order that came. It's possible?
How to mount this menu dynamically using json? Let him be assembled according to the order that came. It's possible?
You can do it, Isa, follow the code:
// Objeto JSON retornado do servidor
var jsonObject = {
items: [
{
onclickFunctions: ['displayPracaRamos', 'displayPracaCidadeMilao'],
icon: 'glyphicon-tree-deciduous',
title: 'Praças'
},
{
onclickFunctions: ['displayCameraCasteloBranco1', 'displayCameraCasteloBranco2'],
icon: 'glyphicon-camera',
title: 'Cameras'
},
{
onclickFunctions: ['displayAlarmsMarker'],
icon: 'glyphicon-alert',
title: 'Ocorrências'
},
{
onclickFunctions: ['showPois'],
icon: 'glyphicon-map-marker',
title: 'POIS'
},
{
onclickFunctions: [],
icon: 'glyphicon-pushpin',
title: 'Minha Localização'
},
{
onclickFunctions: ['toggleFullScreen'],
icon: 'glyphicon-fullscreen',
title: 'Tela Inteira'
}
]
};
// Funções que serão atribuídas aos itens do menu
var menuFunctions = {
'displayPracaRamos': function(data) {
console.log('displayPracaRamos:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayPracaCidadeMilao': function(data) {
console.log('displayPracaCidadeMilao:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayCameraCasteloBranco1': function(data) {
console.log('displayCameraCasteloBranco1:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayCameraCasteloBranco2': function(data) {
console.log('displayCameraCasteloBranco2:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayAlarmsMarker': function(data) {
console.log('displayAlarmsMarker:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayAlarmsMarker': function(data) {
console.log('displayAlarmsMarker:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'showPois': function(data) {
console.log('showPois:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'toggleFullScreen': function(data) {
console.log('toggleFullScreen:');
console.log(data); // Aqui vc faz o que quiser com o item
}
};
// Função que monta o menu
function montaMenu(data) {
data.items.reverse().forEach(function(item) {
var ul = document.querySelector('nav.navbar ul');
var li = document.createElement('li');
var a = document.createElement('a');
var spanTitle = document.createElement('span');
var spanIcon = document.createElement('span');
spanTitle.classList.add('desc');
spanTitle.classList.add('animate');
spanTitle.innerText = item.title;
spanIcon.classList.add('glyphicon');
spanIcon.classList.add(item.icon);
a.classList.add('animate');
a.appendChild(spanTitle);
a.appendChild(spanIcon);
li.appendChild(a);
item.onclickFunctions.forEach(function(func) {
var menuFunc = menuFunctions[func];
li.addEventListener('click', function() {
menuFunc(item);
});
});
ul.insertBefore(li, ul.childNodes[0]);
});
};
montaMenu(jsonObject); // Aqui você chama a função que monta o menu
<nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
<div class="navbar-toggler animate">
<span class="menu-icon"></span>
</div>
<ul class="navbar-menu animate">
<li>
<a href="/PracaInteligente/login" class="animate"> <span class="desc animate"> Sair </span> <span class="glyphicon glyphicon glyphicon-log-out"></span>
</a>
</li>
</ul>
</nav>
It is very dynamic even if you use the item itself as a function parameter if you need to pass some parameter to the function. Another detail is that it does not use any external library like JQuery for example.
I hope I have helped! Any questions just ask me.
Hugs!
One way to do this would be like this (I can not say it's the best way).
let json = [
{
title: "Função Teste",
funcName: "teste()"
},
{
title: "Função Exibir nome",
funcName: "exibirNome()"
},
{
title: "Função comida favorita",
funcName: "comidaFavorita()"
},
{
title: "Função melhor serie",
funcName: "melhorSerie()"
}
]
function menu(){
for(let i = 0; i < json.length; i++){
$('nav ul').append('<li><a href="#" data-func="'+json[i].funcName+'" onclick="'+json[i].funcName+'">'+json[i].title+'</a></li>')
}
}
menu()
function teste(){
alert('f')
}
function exibirNome(){
alert('meu nome é Rafael')
}
function comidaFavorita(){
alert('Minha comida favoria é X-Bacon')
}
function melhorSerie(){
alert('Game Of Thrones')
}
<nav>
<ul>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
As you can see in the example, from a json
I mount the menu with its funções
.