How to create required data from UI

Question

I have a UI where I have Some check boxes I am trying to convert it into an array of objects. An objects has 3 keys Counter,Name and IsActive all this are objects and will be inside the array

When checkbox is on isActive should be Y, I am here to get some good approach according to the task I have already done

What I have done

var Data = {
  "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
  "Counter B": ["CounterB1.jpg"],
  "Counter C": ["CounterC1.jpg"]
}


var counter = {};
var name = {};
var flag = {};


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 = "";

  $(".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>'



    counter = {
      "Counter": key
    } // geting name but it is only giving last counter i.e C
    name = {
      "Name": d
    } // same fpor this 

  });


  $(".list-group", newCard).append(ul_innerhtml);
  $(".card").append(newCard.html());


}
$("#btn").click(function() {


  console.log(counter) // printing counter C only


})

.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" class="btn btn-default commonButton" type="submit">
   <i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>

On click of go I am printing the data but it is giving only one data

i want to create object like

[ { "Counter": "Counter A", "Name": "CountA1.jpg", "IsActive":"Y" },
  { "Counter": "Counter A", "Name": "CountA2.jpg", "IsActive":"N" },
  { "Counter": "Counter B", "Name": "CountB1.jpg", "IsActive":"Y" },
  { "Counter": "Counter C", "Name": "CountC1.jpg", "IsActive":"Y" }]

because I need this structure only for my future work

Your `counter` variable is an object and not an array. In each loop, the variable is overwritten. — prinkpan, Jun 11 '19 at 12:00
You need to create array for `counter` and then use `counter.push({ Counter: ...})`, same thing for `name` too... otherwise will be overwritten with last item of iteration — Snake Eyes, Jun 11 '19 at 12:02
You also need to put this logic of counting the checked counters inside the button click event. — prinkpan, Jun 11 '19 at 12:03
@SnakeEyes I was doing Like that but I thought I need objects aahh, I am messed up — manish thakur, Jun 11 '19 at 12:03

Priyesh Diukar · Accepted Answer · 2019-06-12T07:03:35.810

Since you can dynamically set the value of your checkbox after rendering. A better approach will be to iterate over generated DOM to get the realtime values. Hope this helps.

var Data = {
  "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
  "Counter B": ["CounterB1.jpg"],
  "Counter C": ["CounterC1.jpg"]
}


var counters = [];
var name = {};
var flag = {};


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 = "";

  $(".card-header", newCard).text(key);
  Data[key].forEach(d => {
    ul_innerhtml += '<li class="list-group-item"><span>' + d + '</span><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());


}
$("#btn").click(function() {
  $('.card .list-group').each((i, listGroup) => {
    $listGroup = $(listGroup);
    $listGroup.find('li').each((j, list) => {
      let counter = {
        "Counter": $listGroup.prev().text()
      }
      $list = $(list);
      counter.Name = $list.find('span').text();
      counter.IsActive = $list.find('input').is(":checked") ? 'Y' : 'N';
      counters.push(counter)
    })
  });
  console.log(counters);
})

.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" class="btn btn-default commonButton" type="submit">
   <i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>

hey please check there is issue as only counterA2.jpg of Counter A is showing up — manish thakur, Jun 12 '19 at 06:46
@manishthakur sorry for the inconvenience. I just updated the code to initialize the counter object properly. Please check and consider upvoting. — Priyesh Diukar, Jun 12 '19 at 06:53
hey can you please check out this post once https://stackoverflow.com/questions/56831552/how-to-auto-select-the-dropdown — manish thakur, Jul 01 '19 at 09:27

score 0 · Answer 2 · answered Jun 11 '19 at 12:27

Check below edits i did to your code. Hope you can understand. You have always over-writed the object. In this way it does not happen

var Data = {
  "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
  "Counter B": ["CounterB1.jpg"],
  "Counter C": ["CounterC1.jpg"]
}


var counter = {};
var name = {};
var flag = {};

var object = {};


for (var key in Data) {
  var number = [];

  var newCard = $(`<div>
           <div class="card-header"></div>
           <ul class="list-group list-group-flush">
           </ul>
         </div>`);
  var ul_innerhtml = "";

  $(".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>'

number.push(d);
object[key] = number;

 
  });


  $(".list-group", newCard).append(ul_innerhtml);
  $(".card").append(newCard.html());


}
$("#btn").click(function() {


  console.log(object) // printing counter C only


})

.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" class="btn btn-default commonButton" type="submit">
   <i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>

I am activating only Counter C --> CounterC1.jpg but it is showing up every thing, and only getting is Counter Name,IsActive and Name are also there — manish thakur, Jun 11 '19 at 12:31
If is that you want, you have to add listeners for all the buttons. This approach can not achieve that. — Anjana, Jun 11 '19 at 12:40
I am trying to do that, and that repetitive counter name like Counter A two times I want to have JSON Like That only because I have future requirements like that only — manish thakur, Jun 11 '19 at 12:41
you only have to do is to add a script in your html which includes listeners for all the buttons. That will do. no big changes — Anjana, Jun 11 '19 at 12:51
I am not getting you for what listener you are taking about, if that switch is one I am trying to show IsActive 'Y' otherwise 'N' — manish thakur, Jun 11 '19 at 12:52

How to create required data from UI

2 Answers2