Append HTML based on values in a comma separated string

Question

I am currently trying to determine what HTML is to be appended to the web page which is generated for users based on what values the have in a comma separated string which is stored in a MD array.

I need to be able to check that comma separated string for each value and append HTML based on the values.

At the moment I have it working with single values but if there is more than one value....how to I then go through each EG "html1, html2" I want to be able to identify that html 1 & html 2 is there therefore generate the links etc.

Below is a JS fiddles and example of what I have at the moment, just alter the test 1 value to match up with values in the array if need be.

 jQuery(function($) { var $htmlele = $('.side-contain'); var data = [ ["test1", "user", "yes", "html1,html2"], ["test2", "admin", "yes", "html1"], ["test3", "user", "no", "html2"], ["test4", "user", "no", "html1,html2,html3,test"] ] function append_ele() { var userval = $('#user').text(); var userstr = userval.substring(0, userval.indexOf(" ")); for (var i = 0; i < data.length; i++) { if (data[i][0] === userstr && data[i][3] === "html1") { $htmlele.append('<a href="https://html1.test" class="list-group-item btn">HTML 1</a>'); } else if (data[i][0] === userstr && data[i][3] === "html2") { $htmlele.append('<a href="https://html2.test" class="list-group-item btn">HTML 2</a>'); } else if (data[i][0] === userstr && data[i][3] === "html3") { $htmlele.append('<a href="https://html3.test" class="list-group-item btn">HTML 3</a>'); } } } $(document).ready(function() { $('[data-toggle=offcanvas]').click(function() { if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') { $('.list-group-item').attr('tabindex', '-1'); } else { $('.list-group-item').attr('tabindex', ''); } $('.row-offcanvas').toggleClass('active'); }); }); append_ele(); }); 

 body { padding-top: 50px; } html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ height: 100%; } body { padding-top: 70px; } footer { padding: 30px 0; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { background-color: transparent; color: #999999; } .head { background: #668B8B; color: #000000; } .side-contain { margin-top: 5px; border: 2px solid #668B8B; border-radius: 10px; } .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } @media screen and (min-width: 768px) { .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas-right { right: 20%; } .row-offcanvas-left { left: 20%; } .row-offcanvas-right .sidebar-offcanvas { right: -20%; /* 3 columns */ background-color: rgb(255, 255, 255); } .row-offcanvas-left .sidebar-offcanvas { left: -20%; /* 3 columns */ background-color: rgb(255, 255, 255); } .row-offcanvas-right.active { right: 0; /* 3 columns */ } .row-offcanvas-left.active { left: 0; /* 3 columns */ } .row-offcanvas-right.active .sidebar-offcanvas { background-color: rgb(254, 254, 254); } .row-offcanvas-left.active .sidebar-offcanvas { background-color: rgb(254, 254, 254); } .row-offcanvas .content { width: 80%; /* 9 columns */ -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas.active .content { width: 100%; /* 12 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 20%; /* 3 columns */ } } @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas-right { right: 0; } .row-offcanvas-left { left: 0; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ } .row-offcanvas-right.active { right: 50%; /* 6 columns */ } .row-offcanvas-left.active { left: 50%; /* 6 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } } 

 <!DOCTYPE html> <html lang="en"> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>Byphone Auth</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand">Test Application</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form action="/logout" class="navbar-form navbar-right"> <button class="btn btn-success" type="submit" id="user" onsubmit="return false">test2 | Log Out </button> </form> </div> </div> </nav> <div class="container-fluid"> <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> <div class="row row-offcanvas row-offcanvas-left"> <div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="side-contain"> <div class="panel-heading head" role="tab" id="headingOne"> <h2 class="panel-title">My Account</h2> </div> </div> </div> <div class="col-xs-12 col-sm-10 content"> <div> <h1 class="main-head">User</h1> <p class="lead">Placeholder </div> </div> </div> </div> <hr> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> </body> </html> 

And here is the JsFiddle

Answer 1

here is the change you need to make you can put one more condition in you for loop to identify if you have more then one html in that case you make array of available html, iterate through that html and put your logic there to append

 for (var i = 0; i < data.length; i++) {

 if (data[i][0] === userstr && data[i][3] === "html1") {
 $htmlele.append('<a href="https://html1.test" class="list-group-item    btn">HTML 1</a>');
  } 

  else if (data[i][0] === userstr && data[i][3] === "html2") {
  $htmlele.append('<a href="https://html2.test" class="list-group-item btn">HTML 2</a>');
  } 
   else if (data[i][0] === userstr && data[i][3] === "html3") {
   $htmlele.append('<a href="https://html3.test" class="list-group-item btn">HTML 3</a>');
  }
   else if(data[i][0] === userstr && data[i][3].length >= 7){
  //this is the new block you can add 
  //data[i][3].length >=7 this condition is enough to identify you have more then one html
  var newArr =data[i][3]x.split(",")//get the array of new html
  for(var j =0;j<=newArr.length;j++){
  // iterate through new array of html
  //write you logic heree
  }

  }
}