Jquery checkbox selection iteration

Question

$('.tg tr.data-list-row[name=data-list-row]').click(function() {               
       var currentId = $(this).closest('tr').attr('id');
       $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
           $("#current_typetarif_id").val(data.id);
           $("#inputName").val(data.libelle);
           $("#inputCode").val(data.code);
           $("#inputTarif").val(data.montantTarifDefaut);     

           $('input[type="checkbox"]').each(function(i) {
                $("#option_tarif_chk_" + data.tarifTypeOptionList[0].tarifOptionId).prop('checked', true);
            });
       });            
});

I have the following code which fetch data from the following JSON below:

{
  "id": 1,
  "code": "0001",
  "libelle": "TARIF PUBLIC",
  "montantTarifDefaut": 10.00,
  "tarifTypeList": [
    {
      "chambreTypeId": 1,
      "tarifTypeId": 1
    }
  ],
  "tarifTypeOptionList": [
    {
      "typeTarifId": 1,
      "tarifOptionId": 1
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 2
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 3
    }
  ]
}

I have to use data.tarifTypeOptionList[0] so that it returns me the value, but look like the iteration is not working and it is returning only the first value which is:

 {
    "typeTarifId": 1,
    "tarifOptionId": 1
 },


<form class="form-horizontal" style="margin: 0 auto; width: 150px;" id="scrollit" name="thisForm">
                        <c:forEach items="${option_tarif_list}" var="option_tarif" varStatus="loop">
                            <div class="checkbox1">
                                <label>
                                    <input type="checkbox" name="tarif_inclue" value="${option_tarif.libelle}" class="checkboxchk" id="option_tarif_chk_${option_tarif.id}">
                                    ${option_tarif.libelle}
                                </label>
                            </div>
                        </c:forEach>
<!--                        <input type="button" value="Submit" onclick="loopForm(document.thisForm);">
                        <div id="cbResults"></div>-->
                    </form>

HTML Table row:

<table class="table tg" style="table-layout: fixed; width: 745px">
                <colgroup>
                <col style="width: 249px">
                <col style="width: 249px">
                <col style="width: 249px">

                </colgroup>

                <thead>
                    <tr>
                       <th class="tg-s6z2 bdleft">NOM</th>
                       <th class="tg-s6z2">CODE</th>
                       <th class="tg-s6z2">PRIX PAR DEFAUT</th>
                    </tr>
                </thead>
                <tfoot>
                </tfoot>
                <tbody>
                    <tr>
                    <td colspan="5">
                        <div class="scrollit">
                            <table class="table tg" style="table-layout: fixed;">
                                <colgroup>
                                <col style="width: 220px">
                                <col style="width: 240px">
                                <col style="width: 240px">
                                </colgroup>


                                <c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop">  
                                  <tr class="data-list-row" name="data-list-row" id="${type_tarif.id}" style="cursor: pointer;">
                                    <td class="tg-s6z2 bdleft">${type_tarif.libelle}</td>
                                    <td class="tg-s6z2">${type_tarif.code}</td>
                                    <td class="tg-s6z2">${type_tarif.montantTarifDefaut}</td>
                                    <td class="deleterow bdryt" id="${type_tarif.id}" name="del_button"><div class="glyphicon glyphicon-remove" title="Supprimer"></div></td>
                                  </tr>
                                </c:forEach>
                            </table>
                        </div>
                    </td>
                    </tr>
                </tbody>
            </table>

How can i make sure to get all the values inside this iteration? I thought the .each() method will do the job, but it's not. Please help spot what I'm doing wrong.

Thank you.

Answer 1

$('input[type="checkbox"]') will iterate through the all checkboxes, instead of that try to iterate through the tarifTypeOptionList, so it will give you the current object, by using same we can set checked property true.

$('.tg tr.data-list-row[name=data-list-row]').click(function() {               
   var row = $(this).closest('tr'), currentId =  row.attr('id');

   // to uncheck the previous row checkboxes 

row.siblings().find(".checkboxchk").prop('checked', false);

   // this will uncheck the all checkboxes with class name `checkboxchk` before setting the `checked` to true of the selected row checkboxes.
   $(".checkboxchk").prop('checked', false);

   $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
       $("#current_typetarif_id").val(data.id);
       $("#inputName").val(data.libelle);
       $("#inputCode").val(data.code);
       $("#inputTarif").val(data.montantTarifDefaut);     

       // to check the current row checkboxes using json data
       $.each(data.tarifTypeOptionList, function(i, obj) {
           $("#option_tarif_chk_" + obj.tarifOptionId).prop('checked', true);
       });

   });            
});

Answer 2

Try using data.tarifTypeOptionList[i] inseted of using data.tarifTypeOptionList[0]

$('input[type="checkbox"]').each(function(i) {
  $("#option_tarif_chk_" + data.tarifTypeOptionList[i].tarifOptionId).prop('checked', true);
});