jquery - click on table row to append value in checkboxes

JS

$(document).ready(function() {

  $('.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);
    });
  });

  

});

<div class="table-responsive">
  <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>
</div>

<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>

</form>

JSON value extracted from database

{
  "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
    }
  ]
}

Hi.

This block of code below make a select in the table row to display values into the texts fields.

    $(document).ready(function() {

  $('.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);
    });
  });



});

On clicking on the table row, i need to display the checked values in the checkbox. According to the id selected in the rows, specific values will be checked in the checkboxes. Those values are being extracted from a database through a JSON file. I should extract it using the value (data.tarifOptionId)

I think is should be put it in a loop, so that the id value is incremented when each table row is clicked. The id of the input is #option_tarif_chk_, and it is embeded in a cforeach loop.

I have written something like this below:

            $.each(data, function(i, item) {
                alert(item.tarifTypeOptionList[0].tarifOptionId);
            });

But it is not working. The alert returns Uncaught TypeError: Cannot read property '0' of undefined

Any help will be much appreciated.

Thank you

via Chebli Mohamed