How to Iterate a list of list data to fill html table in JQuery

99
March 08, 2022, at 03:20 AM

I have a table like this

<table>
        <tr>
            <td class="text-center">
                <input class="form-control clsEmployeeId" id="txtEmployeeId" type="text" id="employeeId"  value="' + mainList.EmployeeId + '"/>
               </td>
               <td class="text-center">
                <input class="form-control clsEmployeeName" id="txtEmployeeName" type="text" id="employeeName"  value="' + mainList.EmployeeName + '"/>
               </td>
               <td class="text-center">
                <input type="button" value="Details" style="color: Red;" id="btnDetails" class="clsbtnDet"/>
              </td>
        </tr>
     </table>

What I want is to iterate a list and fill those fields and there is a secondary list of each row (Contains Employee Details) inside the main one and that secondary list data need to fill a modal which initiate by clicking the "Details "button.

Any help will be much appreciated.

Answer 1

You can use .each() loop function which allows you to loop item(row) one by one at a time. It will passes the index (an integer) and the actual element that you can use like the following.

function primaryTable(list){
    $.each(list, function (i, mainList){
      <tr>
           <td class="text-center">
           <input class="form-control clsEmployeeId" id="txtEmployeeId" type="text" id="employeeId"  value="' + mainList.EmployeeId + '"/>
           </td> 
           <td class="text-center">
           <input class="form-control clsEmployeeName" id="txtEmployeeName" type="text" id="employeeName"  value="' + mainList.EmployeeName + '"/>
           </td>
           <td class="text-center">
           <input type="button" value="Detail" style="color: Red;" id="btnDetails" class="clsbtnDet" data-detail="'+ JSON.stringify(mainList.DetailList) + '"/>
           </td>
      </tr>
     });
}

At the Button field you can pass a list through the data-* attribute which is used to store custom data.

After storing your secondary list details data, you could get that list in the button click event by the following code..

var detail_data = $(this).attr('data-detail')); 
var json_detail=new Array(); 
json_detail = json_detail = JSON.parse(detail_data);   // Parse list data as JSON

Then pass this "json_detail" list to a your modal function and use .each() loop onece again to fill up your modal.

Rent Charter Buses Company
READ ALSO
jQuery change doesn&#39;t work in bootstrap 5 tabs

jQuery change doesn't work in bootstrap 5 tabs

I add an input form in bootstrap 5 tabs like this:

96
how to add a for loop data to form.serializer() - jquery

how to add a for loop data to form.serializer() - jquery

I'm trying to send dynamic two input field to backend via ajax, and i have main form, the main form works fine, dont know how to send two extra dynamic inputs to backend, here is my code

119
How would I go about getting a json file into javascipt?

How would I go about getting a json file into javascipt?

I'm extremely new to javascript, so assume I know nothingI'm trying to import this json file into my website, and having issues getting it working

115
How to do ajax PATCH?

How to do ajax PATCH?

I am trying to do ajax PatchBut it's not working

116