# JavaScript sidebar menu with subitems from a Json Object

I'm kind of new to pure javascript and I wanted to try an exercise that I saw around the web. The exercise was to build from a json object (was not included in the exercise so I had to improvise ), a sidebar navigation menu with sub items.

With jQuery this would have been more easier, but truth is that I don't want to keep using jQuery just because it's easier.

I did this:

var nav = document.getElementById('navigation');

return ('<a href="'+ link +'">'+ name + '</a>');
}

for(item of childdata){
var line = document.createElement("li");

}else{
}
}
}

for(item of childdata){
var line = document.createElement("li");

}else{
}
}
}

var line = document.createElement("li");
nav.appendChild(line);

}else{
nav.appendChild(line);
}
}
}

const navData = [
]},
]},
]},
]},
]},
]},
];

createLink(navData);
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
body{
font-family: Arial;
}
.nav-item{
position: relative;
max-width: 200px;
}
.nav-item a{
display: block;
background: #400000;
color: orange;
text-decoration: none;
border: 1px solid orange;
margin-top: -1px;
max-width: 200px;
}
nav ul > .nav-item:first-child a{
margin-top: 0;
}
display: none;
position: absolute;
left: 100%;
margin-left: -1px;
top: 0;
width: 200px;
}
display: block;
}
</style>
<body>
<nav>
</ul>
</nav>
<script type="text/javascript" src="nav.js"></script>
</body>
</html>

I made it work, but I'm sure this is pretty messy and ugly, or maybe not. Is there any way to keep it more simple? seems like a lot of useles lines. I been trying to find documentation about how to do this kind of things, but they always suggest using jQuery.

### Don't repeat yourself

The functions submenu and subsubmenu look identical to me. And if I overlooked a difference, I wouldn't blame myself. I suspect you copy-pasted the original and then forgot to make the necessary changes. But the copy-pasting step is a mistake. Instead of copy-pasting, consider extracting common behavior to a helper function.

I see code duplication at smaller scales too, for example here:

if(item.submenu){
}else{
}


Both branches of the condition have submenuId.appendChild(line);, and since it appears at the beginning of both branches, it should be moved out of the conditional:

submenuId.appendChild(line);

}


### Manipulating DOM objects

Instead of setting innerHTML like this:

line.innerHTML = linkHref(item.link, item.title)


It would be more natural to add as a child:

line.appendChild(linkHref(item.link, item.title))


Similarly, instead of stitching together an <a/> element from string pieces like this:

return ('<a href="'+ link +'">'+ name + '</a>');


It would be more idiomatic to work with DOM objects:

function link(path, title) {

I also renamed the function to something more natural than linkHref, and its parameters to more accurately reflect what they represent.