I want to make a dropdown in my table which is populated with the dynamic data coming from ajax response and append to the table. My postman collection looks like this.

    {
        "createdDate": "2022-04-06T11:42:37.360Z",
        "enabled": true,
        "_id": "62502b868daa3b1cdbdc98e8",
        "CNIC": "40740c7d9f3a11d93e76af7f2f60887a",
        "employeeID": "LE44337",
        "fName": "HUSNAIN",
        "company": "6249fdf91399dc7a14173dcd",
        "fatherName": "husnain",
        "motherName": "momutaz",
        "spouse": "no spouse",
        "children": [
            {
                "_id": "62502b868daa3b1cdbdc98e9",
                "name": "hunsian",
                "age": 23232
            },
            {
                "_id": "62502b868daa3b1cdbdc98ea",
                "name": "hunsian",
                "age": 12121
            },
            {
                "_id": "62502b868daa3b1cdbdc98eb",
                "name": "momin",
                "age": 2323
            }

And below is my ajax response code in which I am appending the data into table.

    success : function(response){
                    
             var trHTML = '';
                $.each(response.doc, function (i, item) {
                    
                trHTML  = '<tr><td>'   item.fName   '</td><td>'   item.CNIC   '</td><td>'   item.spouse   '</td><td>'  item.fatherName   '</td><td>'   item.motherName  '</td><td>'  item.employeeID  '</td><td>'   item.children.map(({name, age}) => `Name: ${name} Age: ${age}`).join('  ||  ')  '</td></tr>';
                });
         $('#records_table').append(trHTML);

    }

The itme.children name , age I want to make a dropdown of it into table so it looks good.

CodePudding user response：

If you mean a dropdown like a select menú, this should do the job

trHTML  = `... <td>
    <select>
        <option selected disabled>Click me</option>`   
        item.children.map(({name   age}) => `<option>Name: ${name}, Age: ${age}</option>`).join('')  
    `</select></td>`;