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

Question

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.

"*I want...to iterate a list and fill those fields...*" - can you share an example of that list? — David Thomas, Feb 06 '22 at 09:41
Does this answer your question? [Convert JSON array to an HTML table in jQuery](https://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery) — zer00ne, Feb 06 '22 at 10:39

Muhammad Abdul Arif Sarker · Accepted Answer · 2022-02-06T10:16:45.983

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.

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

1 Answers1