How to get selected checkbox table row with each td data attributes to array objects?

Question

Here is my Html code block I loaded table data from rest api and i want to get array object from each row td data attributes selected using the checkbox

<tr>
  <th scope='row' class='product-item-check'><input class='product-item-checkbox' type='checkbox' name='select-product' value='"+obj.pk_productId+"'></th>
  <td data-th_name='"+th_cell+"' data-td_name='"+td_cell+"' >" + td_cell + "</td>
</tr>

My Sample Code

$(document).on('click','.product-item-checkbox',function(){
        var thName;
        var tdName;
        var td;
        var checkedValue =  $('.product-item-checkbox:checked').closest('tr').find('td').map(function(i, v){
            thName = $(this).data('th_name');
            tdName = $(this).data('td_name');
            td = {
                "thead":thName,
                "tdata":tdName
            }
            return td;
        }).get();
        console.log(checkedValue);
});

Current OutPut
Expected Output

[
  {
    "pk_productId": 1940690,
    "productCode": "abcmkk",
    "productDescription": "Sample Description",
    "callout": 12qwww,
    "product_type": "woven",
    "product_image": null,
    "status": 1234,
  },
  {
    "pk_productId": 1940690,
    "productCode": "abcmkk",
    "productDescription": "Sample Description",
    "callout": 12qwww,
    "product_type": "woven",
    "product_image": null,
    "status": 1234,
  }
]

Matt Oestreich · Accepted Answer · 2019-12-11T01:41:57.873

If I am understanding this correctly, you are wanting to get the selected row(s) in JSON format?

While it is not an 'apples to apples' demonstration (as far as the data being used), the idea/logic remains the same...something like this should do the trick:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head>
<table id="my-table"></table>
<h1 id="selected-items-title"></h1>
<pre id="selected-items"></pre>
<script>
    /**
     * GLOBAL DATA
     */
    let GLOBALS = {
        apiData: [ // PRETEND YOU ARE GETTING THIS DATA FROM A REST API
            { company: "Alfreds Futterkiste", name: "Maria Anders", country: "Germany" }, 
            { company: "Centro comercial Moctezuma", name: "Francisco Chang", country: "Mexico" }, 
            { company: "Ernst Handel", name: "Roland Mendel", country: "Austria" }
        ],
        tableData: "<tr><th></th><th>Company</th><th>Name</th><th>Country</th></tr>",
    }

    /**
     * DOCUMENT READY
     */
    $(document).ready(function () {
        // Add our API data to our table on load
        GLOBALS.apiData.forEach(item => {
            GLOBALS.tableData += `
            <tr>
                <td><input class='product-item-checkbox' type='checkbox' name='select-product'/></td>
                <td data-th_name="company" data-td_name="${item.company}">${item.company}</td>
                <td data-th_name="name" data-td_name="${item.name}">${item.name}</td>
                <td data-th_name="country" data-td_name="${item.country}">${item.country}</td>
            </tr>`;
        });
        $("#my-table").html(GLOBALS.tableData);
    });

    /**
     * EVENT .product-item-checkbox CLICK
     */
    $(document).on('click', '.product-item-checkbox', function () {
        // Finds all checked checkboxes and adds contents to array
        let selectedData = [];
        $('.product-item-checkbox:checkbox:checked').each((index, checkbox) => {
            let thName, tdName;
            let td = {};    
            $(checkbox).closest('tr').find('td').each(function (i, v) {
                thName = $(this).data('th_name');
                tdName = $(this).data('td_name');
                if (thName !== undefined) {
                    td[thName] = tdName;
                }                
            }).get();
            if (td) selectedData[selectedData.length] = td
        });
        
        if (selectedData.length > 0) {
            $("#selected-items-title").html("Selected Items:");
            $("#selected-items").show();
            $("#selected-items").html(JSON.stringify(selectedData, null, 2));
            console.log(selectedData);
        } else {
            $("#selected-items-title").html(""); 
            $("#selected-items").hide();
        }                 
    });
</script>

If there is any way to solve this problem using without using spread operator and push function. — Pramith Chathuranga, Dec 11 '19 at 01:12
@MalagodaPathirana why do you want to do that... what is your use case? I don't understand why you don't want to use those *features*.. with that being said, I have updated my answer to show how you can accomplish this. — Matt Oestreich, Dec 11 '19 at 01:42
There is issue with browser compatibility if using new features. — Pramith Chathuranga, Dec 11 '19 at 02:05

How to get selected checkbox table row with each td data attributes to array objects?

1 Answers1