javascript - How should I apply if-else condition to display different menu to people with different user roles? -

i've 2 user roles defines i.e.

1 : roleid admin user , 2: roleid normal user

the logic tried has been written in 2 javascript code files(.js files follows):

first file : prj.js

var ref = new firebase("https://prj.firebaseio.com"); var loggedinuser = []; $(document).ready(function() {     authdata=ref.getauth();      if(authdata == null){         //todo find elegant way manage authorization      //  window.location = "../index.html";     }else{         ref.child("users").child(authdata.uid).on("value", function(snapshot){             $( "span.user-name").html(snapshot.val().displayname);               loggedinuser.displayname = snapshot.val().displayname;             loggedinuser.roleid = snapshot.val().roleid;         });              } }); 

second file : navigation.js

appraisalmenuhtml = '       <li class="{{appraisal}}" class="dropdown"><a class="dropdown-toggle appraisal"'     +'          data-toggle="dropdown"  href="/prj/pages/appraisal/appraisaldashboard.html"><span id="appraisal"> appraisal</span></a>'     +'          <ul class="dropdown-menu">'     +'              <li><a href="/prj/pages/appraisal/appraisaldashboard.html">submit review </a></li>'     +       ' </ul></li>';  useroptionshtml = ' <ul class="nav navbar-nav navbar-right">'     +'      <li class="dropdown"><a class="dropdown-toggle"'     +'          data-toggle="dropdown" href="#"><img src="/prj/images/settings.png"/></a>'     +'          <ul class="dropdown-menu">'     +'              <li><a href="/prj/pages/appraisal/reports.html"> appraisal</a></li>'     +'          </ul>'     +       '</li>'     +'      <li class="dropdown"><a class="dropdown-toggle user-name"'     +'          data-toggle="dropdown" href="#"><span class="user-name"></span><span class="caret"></span></a>'     +'          <ul class="dropdown-menu">'     +'              <li><a href="/prj/pages/profile.html"> profile</a></li>'     +'              <li><a href="/prj/index.html"> logout</a></li>'     +'          </ul>'     +       '</li>'     +'  </ul>';    navhtml =      '<nav class="navbar navbar-inverse">'     +'<div class="container-fluid">'     +'<div class="navbar-header">'     +'  <button class="navbar-toggle" type="button" data-toggle="collapse"'     +'      data-target="#securednavbar">'     +'      <span class="icon-bar"></span> <span class="icon-bar"></span> <span'     +'          class="icon-bar"></span>'+' </button>'+'</div>'+'<div class="collapse navbar-collapse" id="securednavbar">'     +'  <ul class="nav navbar-nav">'     +'      <li class="{{feeds}}"><a href="/prj/pages/feeds.html"><img src="/prj/images/darpan-logo.png" height="20px" /> home</a></li>'     +'      <li class="{{projects}}" class="dropdown"><a class="dropdown-toggle projects"'     +'   data-toggle="dropdown" href="#"><span class="projects">projects</span></a>'     +'          <ul class="dropdown-menu">'     +'              <li><a href="/prj/pages/project/projectlist.html">list</a></li>'     +'              <li><a href="/prj/pages/project/createnewproject.html">add new project</a></li>'     +'          </ul>'     +'      </li>'     +'      <li class="{{training}}"><a href="#">training</a></li>'      + appraisalmenuhtml      +'      <li class="{{recruitment}}"><a href="#">recruitment</a></li>'     +'      <li class="{{users}}" class="dropdown"><a class="dropdown-toggle users"'     +'      data-toggle="dropdown" href="/prj/pages/user/userlist.html"><span class="users">users</span></a>'     +'          <ul class="dropdown-menu">'     +'              <li><a href="/prj/pages/user/userlist.html">list</a></li>'     +'              <li><a href="/prj/pages/user/createnewuser.html">add new user</a></li>'     +'          </ul>'     +'      </li>'     +'  </ul>'      + useroptionshtml      +'</div>'     +'</div>'     +'</nav>';     function darpannav(selectedtab){     alert('object : '+loggedinuser.tostring());       thecompiledtemplate = navhtml.replace("{{"+selectedtab+"}}", "active")     newrow = $("#nav-div").html(thecompiledtemplate); } 

html file :

<!doctype html> <html lang="en"> <head></head> <body> . . . . . .  <script src="../js/prj.js"></script>      <script src="/prj/js/navigation.js"></script>      <script>     darpannav("feeds");      </script>  </body> </html> 

note : necessary libraries , files have been included. don't worry it.

now want achieve apply if-else condition on content of variable navhtml file navigation.js based on user roles. if roleid 2 don't want display content of appraisalmenuhtml , if 1 display it.

how should achieve this?

the issue i'm facing in applying condition od newhtml i'm not able access modified global variable loggedinuser values. main obstacle in task.

somebody please me.

from see in prj.js, loggedinuser seems belong global scope, should able access in navigation.js since invoked after prj.js. note not practice have in global scope.

unless have reason create template javascript files (if use react.js instance) should place in actual html files, , make logic template engine jade.