Nested JS for Loop with if Conditions

by Daniel Pegues

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="wrapper">
	<div class="wrapper_outer">
		<div class="wrapper_inner">
			
			<!-- Sidebar: Start -->
			<div class="sidebar collapsed">
				<div class="sidebar_inner">
					
					<!-- Sidebar Navigation: Start -->
					<ul class="sidebarnav"></ul>
					<!-- Sidebar Navigation: End -->
					
					<div class="clear"></div>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- Sidebar: End -->
			
			<div class="clear"></div>
		</div>
		
		<div class="clear"></div>
	</div>
	
	<div class="clear"></div>
</div>

CSS

/*
Author: Name
Author URI: http://www.domain.com
Description: Developed for PROJECT.
Version: 1.1
License: Proprietary
*/

/* ***************************************************************************************************

	Description: PROJECT

	TABLE OF CONTENTS:
	------------------
		 I. Browser Resets
		II. Global Styles
	   III. Main Containers

   *************************************************************************************************** */

/* *************************************************************************************************** */
/* Import Fonts ************************************************************************************** */
/* *************************************************************************************************** */
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800,300italic,600italic);



/* *************************************************************************************************** */
/* I. Browser Resets ********************************************************************************* */
/* *************************************************************************************************** */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, figcaption, figure,
footer, header, main, nav, section {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	outline: 0;
	vertical-align: baseline;
	border: 0;
	}
	html {
		width: 100%;
		height: 100%;
		font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
		/* overflow-y: scroll; */ /* Keeps page...

JavaScript

jQuery(document).ready(function(){
	
	// Initialize Sidebar Navigation (fireglobe.js)
	sidebarInit();

});

// Debug Value
var debug = true;



/**
 * Sidebar Initialization Function
 */
function sidebarInit(){
	
	// Sidebar Structure Parsed
	sidebarData();
	
	var delayLoad = setTimeout(function(){
		
		// Sidebar View Toggle
		sidebarViewToggle();
		
		// Sidebar Items Subnavigation
		sidebarItemSubNav();
		
	}, 150);
	
}



/**
 * Sidebar JSON Parsing
 */
function sidebarData(){
	
	// Debug
	if(debug == true){ console.log('Function sidebarData Initialized'); }
  
	// Variables
	//var dataUrl = 'json/sidebar.json';
  var dataUrl = 'https://api.myjson.com/bins/ranp';
	var errorMessage = 'An error occurred while generating the sidebar.';
	
	$.ajax({
		url: dataUrl,
		method: 'GET',
		dataType: 'json',
		success: function(data){
			sidebarOutput(data);
		},
		error: function(){
			
			// Debug
			console.log(errorMessage);
		}
	});
	
}



/**
 * Sidebar Data Output
 */
function sidebarOutput(string){
	
	// Debug
	if(debug == true){ console.log('Function sidebarOutput Initialized'); }
	
	// Variables
	var sidebarData = string;
	var sidebarOutput = '';
	
	// Debug
	if(debug == true){
		console.log(sidebarData);
		console.log('JSON Data Length: ' + sidebarData.menus.length);
	}
	
	for(var i=0;i<sidebarData.menus.length;i++){
		
		sidebarOutput = sidebarOutput + 
			'<li class="sidebaritem collapsed level1 ' + sidebarData.menus[i].parentItemClass + '">' +
				'<a href="#" class="parentlink icon sbnitem' + (i+1) + '" title="' + sidebarData.menus[i].parentItem + '">' + 
					sidebarData.menus[i].parentItem + 
				'</a>' +
				'<ul class="sidebarsubnav level2">';
			
			for(var j=0;j<sidebarData.menus[i].submenuItems.length;j++){
				var e = sidebarData.menus[i].submenuItems[j];
				var eLength = e.length;
				console.log(eLength);
				
				//sidebarOutput += (j==0) ? '<ul class="sidebarsubnav level2">' : '';
				//if(j==0){console.log('j is equal to...