Extract table rows having checked checkboxes into array of objects

Question

I'm trying to save the specific objects in an array that has the checkbox 'checked'. I want to create the new array so I can use only those latter.

How can I do that using jquery?

'use strict';

class event {
  constructor(jQuery) {
    this.$ = jQuery;
  }

  getEvents(eventKey) {
    let aEvents = [{
        eventName: 'ABDCCC',
        // true = checked
        status: true
      },
      {
        eventName: 'ACC',
        status: true
      }
    ];
    return aEvents;

    /**
     * Update
     * @param {array} [aEvents]
     */
    setEvents = function(aEvents) {
      // Put them on a table
      var table = this.$('#eventsTable');
      table.find('tbody tr').remove();
      for (var i = 0; i < aEvents.length; i++) {
        let event = aEvents[i];
        table.find('tbody').append(`
        <tr>
          <td>
            ${event.eventName}
          </td>
          <td>
          <div id="check-list" class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" ${event.status ? 'checked' : ''} id="customSwitch${i}"/>
            <label class="custom-control-label" for="customSwitch${i}"></label>
          </div>
          </td>
        </tr>
      `);
      }
    }
  }

I want to get this result

You can check the Events you like (done)
When click on a button ('save this events' for ex) only the checked events will be saved on a new array of objects, the same ones in getEvents()

Should that be array of what? jQuery objects, DOM nodes, certain values from within cells of selected table rows...? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jan 21, 2020 at 11:37
Which exactly kind of objects? Would you append desired output to your post? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jan 21, 2020 at 11:38
@YevgenGorbunkov They will have the same properties as the ones above, an eventName and a status. I just want that the user could choose the ones they like and display them in another table. — Kamelo10
– Kamelo10, Commented Jan 21, 2020 at 11:44
Can you try to add your code formatted as a minimal reproducible example and add a more clear example of desired output? It would be good to better understand your logic and your objective here — Calvin Nunes
– Calvin Nunes, Commented Jan 21, 2020 at 11:49

Ahmed Tag Amer · Accepted Answer · 2020-01-21 11:53:56Z

Here is a very simple way to perform what you want:

var arr = [];
$("#ok").click(function(){
 $("#results").html("");
 arr = [];
 $('input.events[type="checkbox"]').each(function(){
  if($(this).is(":checked")){
   var evName = $(this).attr("id");
   arr.push($('label[for="'+evName+'"]').text()); 
   $("#results").append("<p>"+$('label[for="'+evName+'"]').text()+"</p>");
  } 
 });
});

table{
  width:100%;
}

table td{
  display:block;
}

#results p{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
 <tbody>
   <tr>
     <td><input type="checkbox" class="events" id="ev1" /> <label for="ev1">Event One</label> </td>
     <td><input type="checkbox" class="events" id="ev2" /> <label for="ev2">Event Two</label> </td>
     <td><input type="checkbox" class="events" id="ev3" /> <label for="ev3">Event Three</label> </td>
     <td><input type="checkbox" class="events" id="ev4" /> <label for="ev4">Event Four</label> </td>
     <td><input type="checkbox" class="events" id="ev5" /> <label for="ev5">Event Five</label> </td>
     <td> <button id="ok">OK</button> </td>
   </tr>
 </tbody>
</table>

<h5>Selected events :</h5>
<div id="results"></div>

Yevhen Horbunkov · Accepted Answer · 2020-01-21 12:22:30Z

Conventionally, you would need to pass some anchor to your desired property name within <td> HTML-attributes (say, it would be prop attribute). If you don't want property names to be hardcoded (which is not so flexible).

Next, you simply need to select <tr> nodes having (.has("input:checked")) checked checkbox.

With that you iterate over selected rows, turning first (:lt()) <td> nodes, containing your target data into object properties:

$('#savebtn').on('click', () => {
   const selectedRows = [...$('table tbody tr:has("input:checked")')]
      .map(tr => 
        [...$(tr).find('td:lt(2)')]
          .reduce((res,td) => (res[$(td).attr('prop')]=$(td).text(), res),{}))
   console.log(selectedRows)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Event name</th><th>Visitors qty</th><th>visited</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td prop="eventname">Christmass Eve Party</td><td prop="qty">500</td><td><input type="checkbox"></input>
    </tr>
    <tr>
      <td prop="eventname">Thanksgivin Day</td><td prop="qty">300</td><td><input type="checkbox"></input>
    </tr>
    <tr>
      <td prop="eventname">Independence Day</td><td prop="qty">600</td><td><input type="checkbox"></input>
    </tr>
  </tbody>
</table>
<button id="savebtn">Save</button>

Axel Köhler · Accepted Answer · 2020-01-21 12:00:01Z

0

Here's a solution:

let checkedEvents = [];
$('#eventsTable').find('tbody tr').each(function(index) {
  if( $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked') ) {
    checkedEvents.push({
      eventName: $(this).find("td:first-child").text().trim(),
      status: $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked'),
    });
  }
});
// Do something with checkedEvents

If you are going to do this with more labels/table cells in a row, adding an id, class or other property to them might be helpful for targetting. If you do this consequently, you could even use a loop to set all attributes of the object.

answered Jan 21, 2020 at 12:00

Axel Köhler

1,1071 gold badge14 silver badges39 bronze badges

3 Comments

Yevhen Horbunkov Over a year ago

$('#eventsTable').find('tbody tr') is excessive - it is equivalent to $('#eventsTable tbody tr'); looping through all rows and checking on each step prop('checked') is too verbose, as well - simple :checked selector does the trick in way more concise manner; hardcoding object key names will work for 2 of them, but may become tedious for a larger number of keys - relying on some attribute is more flexible; using [id^=customSwitch] (borrowed from OP's code) doesn't make much sense either - selecting by class attribute would be a better option.

Yevhen Horbunkov Over a year ago

Moreover, doing status: $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked') doesn't make sense as you will reach that point when if( $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked') ) condition is passed, so simple status: true would give same result faster (if stick to hardcoding your object approach).

Yevhen Horbunkov Over a year ago

For a flexible and scalable solution, you might want to check out my answer

Collectives™ on Stack Overflow

Extract table rows having checked checkboxes into array of objects

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related