Q: How to create required UI with JSON data I have A Json data from Which I am trying to create a required UI, but my problem is I am facing issue while looping it  
Ui with Static code what I am trying to achieve dynamically


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: blue;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="container">
  <div class="row">



    <div class="col-md-6">
      <div class="card" style="margin: 20px 0">
        <div class="card-header">Employ A</div>

        <ul class="list-group list-group-flush">

          <li class="list-group-item">EmployA1 <label class="switch "> <input type="checkbox" class="success" >
        <span class="slider round" ></span>
      </label>
          </li>
          <li class="list-group-item">EmployA2 <label class="switch "> <input type="checkbox" class="success">
        <span class="slider round"></span>
      </label>
          </li>

        </ul>
        <div class="card-header">Employ B</div>

        <ul class="list-group list-group-flush">

          <li class="list-group-item">EmployB1 <label class="switch "> <input type="checkbox" class="success">
        <span class="slider round"></span>
      </label>
          </li>

        </ul>
        <div class="card-header">Employ C</div>

        <ul class="list-group list-group-flush">

          <li class="list-group-item">EmployC1 <label class="switch "> <input type="checkbox" class="success">
        <span class="slider round"></span>
      </label>
          </li>

        </ul>
      </div>
    </div>
  </div>
</div>


Dynamic Code I am working on


var Data = {
  "Employ A": ["EmployA1.jpg", "EmployA2.jpg"],
  "Employ B": ["EmployB1.jpg"],
  "Employ C": ["EmployC1.jpg"]
}

var counters = Object.keys(Data)


console.log(counters.length);
for (var key in Data) {
  ul_innerhtml = "";
  console.log(key)
  $(".card-header").text(key);
  for (i = 0; i < counters.length; i++) {

    var ul_innerhtml = ul_innerhtml + '<li class="list-group-item">' + Data + '<label class="switch "><input name="type" type="checkbox" class="success" value="' + Data + '"><span class="slider round"> </span></label></li>';
  }
  $(".list-group").html(ul_innerhtml);
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">


    <div class="card" style="margin: 10px 0">

      <div class="card-header"></div>

      <ul class="list-group list-group-flush">


      </ul>
    </div>
  </div>
  <button id="btn-search" class="btn btn-default commonButton" type="submit">
   <i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>


I don't know what I am doing wrong, as I am getting gey and trying to show them as in class .card-header in div and its values to below the as per check boxes, but it shows up objext-object to the values card value is populating correctly but it shows up only one counter

A: Your nested loop is not correct. It's looping over the same list of keys as for key in Data. You need to loop over Data[key] to get the array elements.
You need to create a new card-header and list-group each time through the outer loop, this will contain the employee name. Then the inner loop fills in that list group with the items from the arrays. Finally, you append this all to the .card DIV.


var Data = {
  "Employ A": ["EmployA1.jpg", "EmployA2.jpg"],
  "Employ B": ["EmployB1.jpg"],
  "Employ C": ["EmployC1.jpg"]
}

var counters = Object.keys(Data)

console.log(counters.length);
for (var key in Data) {
  var newCard = $(`<div>
      <div class="card-header"></div>
      <ul class="list-group list-group-flush">
      </ul>
    </div>`);
  var ul_innerhtml = "";
  console.log(key)
  $(".card-header", newCard).text(key);
  Data[key].forEach(d =>
    ul_innerhtml += '<li class="list-group-item">' + d + '<label class="switch "><input name="type" type="checkbox" class="success" value="' + d + '"><span class="slider round"> </span></label></li>'
  )
  $(".list-group", newCard).append(ul_innerhtml);
  $(".card").append(newCard.html());
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="card" style="margin: 10px 0">
    </div>
  </div>
  <button id="btn-search" class="btn btn-default commonButton" type="submit">
   <i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>


