【发布时间】：2021-11-25 12:09:09
【问题描述】：
首先，我将展示我将在另一个for each 中使用的for each，以显示有数据：
每个有问题的（下拉菜单）
Ajax 函数：
(function() {
$.ajax({
type: "GET",
url: "/clinical/bbr-group-configuration-group-list-type-name",
dataType: "json",
success: function (response){
var tbody="";
$.each(response.all_group_type_names, function (key, group_type_name) {
tbody+='<option value="'+group_type_name.group_type_id+'">'+group_type_name.group_type_name+'</option>';
});
$('#group-type-form select').html(tbody)
}
});
})();
现在对于表格，这个例子是为了展示 for each inside the for each on top 的工作原理。不同之处在于我使用的是完全相同的：
代码：
var tbody = "";
$.each(response.all_groups, function(key, group) {
tbody += '<tr>' +
'<td><p class="font-weight-bold mb-0">' + group.group_name + '</p>' + group.group_description + '</td>' +
'<td>' + group.group_type_name + '</td>' +
'<td>';
$.each(response.all_groups, function(key, group) {
tbody+='<p>yes</p>'
});
tbody += '</td>' +
'<td>' + getgroupstatus(group.effective_start_datetime, group.effective_end_datetime) + '</td>' +
'<td>' +
'<button type="button" value="' + group.id + '" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button> ' +
'<button type="button" value="' + group.group_id + '" title="delete ' + group.group_name + '" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>' +
'</td>' +
'</tr>';
});
这是for each 行：
$.each(response.all_groups, function(key, group) {
tbody+='<p>yes</p>'
});
下面的截图显示它可以工作：
现在这是我的问题，通过为每个添加一个单独的，我当然假设我需要先声明该函数，然后再为每个使用一个，我的问题是它返回空白。我不确定我是否将代码定位错误，或者我需要添加其他内容，因为正如我的第一个示例所述，response.all_group_type_names 有数据并且可以在我的 UI 的另一部分工作。
var tbody = "";
$.each(response.all_groups, function(key, group) {
tbody += '<tr>' +
'<td><p class="font-weight-bold mb-0">' + group.group_name + '</p>' + group.group_description + '</td>' +
'<td>' + group.group_type_name + '</td>' +
'<td>';
(function() {
$.ajax({
type: "GET",
url: "/clinical/bbr-group-configuration-group-list-type-name",
dataType: "json",
success: function (response){
$.each(response.all_group_type_names, function (key, group_type_name) {
tbody+='<p>'+group_type_name.group_type_name+'</p>'
console.log(group_type_name.group_type_name);
});
}
});
})();
tbody += '</td>' +
'<td>' + getgroupstatus(group.effective_start_datetime, group.effective_end_datetime) + '</td>' +
'<td>' +
'<button type="button" value="' + group.id + '" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button> ' +
'<button type="button" value="' + group.group_id + '" title="delete ' + group.group_name + '" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>' +
'</td>' +
'</tr>';
});
以下输出：（空白）
- 请注意，我在
for each中添加了console.log，以表明数据仍然存在，但UI 中没有输出。
提前感谢您的帮助。
更新：
为避免混淆，我将在下面展示完整的功能。如您所见，我有两个ajax GET `for each:
fetchgroup();
function fetchgroup() {
var current_category_id = $('#current_category_id').val();
var current_status = $('#current_status').val();
$.ajax({
type: "GET",
url: "/clinical/bbr-group-configuration-group-list/"+current_category_id+"/"+current_status,
dataType: "json",
success: function (response){
var tbody = "";
$.each(response.all_groups, function(key, group) {
tbody += '<tr>' +
'<td><p class="font-weight-bold mb-0">' + group.group_name + '</p>' + group.group_description + '</td>' +
'<td>' + group.group_type_name + '</td>' +
'<td>';
(function() {
$.ajax({
type: "GET",
url: "/clinical/bbr-group-configuration-group-list-type-name",
dataType: "json",
success: function (response){
$.each(response.all_group_type_names, function (key, group_type_name) {
tbody+='<p>'+group_type_name.group_type_name+'</p>'
});
}
});
})();
tbody += '</td>' +
'<td>' + getgroupstatus(group.effective_start_datetime, group.effective_end_datetime) + '</td>' +
'<td>' +
'<button type="button" value="' + group.id + '" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button> ' +
'<button type="button" value="' + group.group_id + '" title="delete ' + group.group_name + '" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>' +
'</td>' +
'</tr>';
});
$('#main-group-list tbody').html(tbody)
}
});
}
更新：
这是我目前得到的：
fetchgroup();
function fetchgroup() {
var current_category_id = $('#current_category_id').val();
var current_status = $('#current_status').val();
$.ajax({
type: "GET",
url: "/clinical/bbr-group-configuration-group-list/"+current_category_id+"/"+current_status,
dataType: "json",
success: function (response){
var tbody = "";
$.each(response.all_groups, function(key, group) {
tbody += '<tr>' +
'<td><p class="font-weight-bold mb-0">' + group.group_name + '</p>' + group.group_description + '</td>' +
'<td>' + group.group_type_name + '</td>' +
'<td>';
(function() {
$.ajax({
type: "GET",
url: "/clinical/bbr-group-configuration-group-user-list",
dataType: "json",
success: function (response){
$.each(response.all_group_users, function (key, group_type_user) {
tbody+='<p>'+group_type_user.name+'</p>'
console.log(group_type_user.name);
});
}
});
})();
tbody += '</td>' +
'<td>' + getgroupstatus(group.effective_start_datetime, group.effective_end_datetime) + '</td>' +
'<td>' +
'<button type="button" value="' + group.id + '" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button> ' +
'<button type="button" value="' + group.group_id + '" title="delete ' + group.group_name + '" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>' +
'</td>' +
'</tr>';
});
$('#main-group-list tbody').html(tbody)
}
});
}
如您所见，它应该显示在 UI 中，但仅显示在 console.log 中。忽略 null，它只表示列表将包含 3 行和 2 个空格。
tbody+='<p>'+group_type_user.name+'</p>'
console.log(group_type_user.name);
是我尝试在 UI 中输出数据的内容，console.log 是屏幕截图中的工作内容。
【问题讨论】：
-
在将
$.each()嵌套在另一个$.each()中时，最好为每个key和value使用唯一的名称。
标签： jquery ajax function foreach get