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.
JavaScript
x
26
26
1
{
2
"createdDate": "2022-04-06T11:42:37.360Z",
3
"enabled": true,
4
"_id": "62502b868daa3b1cdbdc98e8",
5
"CNIC": "40740c7d9f3a11d93e76af7f2f60887a",
6
"employeeID": "LE44337",
7
"fName": "HUSNAIN",
8
"company": "6249fdf91399dc7a14173dcd",
9
"fatherName": "husnain",
10
"motherName": "momutaz",
11
"spouse": "no spouse",
12
"children": [{
13
"_id": "62502b868daa3b1cdbdc98e9",
14
"name": "hunsian",
15
"age": 23232
16
}, {
17
"_id": "62502b868daa3b1cdbdc98ea",
18
"name": "hunsian",
19
"age": 12121
20
}, {
21
"_id": "62502b868daa3b1cdbdc98eb",
22
"name": "momin",
23
"age": 2323
24
}
25
}
26
And below is my ajax response code in which I am appending the data into table.
JavaScript
1
10
10
1
success : function(response){
2
3
var trHTML = '';
4
$.each(response.doc, function (i, item) {
5
6
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>';
7
});
8
$('#records_table').append(trHTML);
9
}
10
The itme.children name , age I want to make a dropdown of it into table so it looks good.
Advertisement
Answer
If you mean a dropdown like a select menú, this should do the job
JavaScript
1
6
1
trHTML += `... <td>
2
<select>
3
<option selected disabled>Click me</option>` +
4
item.children.map(({name + age}) => `<option>Name: ${name}, Age: ${age}</option>`).join('') +
5
`</select></td>`;
6