Laravel项目中jQuery嵌套each循环渲染表格出现undefined问题问询

问题根因 #

1. 内层遍历逻辑没有处理HTML拼接：你直接将$.each放在字符串拼接位置，$.each本身不会返回回调内生成的HTML片段，回调内部仅声明了字符串也没有做任何拼接操作，最终<td>内拼接的是无有效返回值的遍历方法的执行结果，所以显示undefined。
2. 数据匹配规则缺失：后端查询all_group_users时固定筛选了group_id=113，且前端内层遍历没有做分组和用户的关联匹配，即使修好了拼接逻辑，也会出现所有分组都渲染相同用户的问题。

修复方案 #

1. JS代码调整 #

先声明临时变量存储当前分组对应的用户HTML片段，遍历完成后再将片段拼入表格：

var tbody="";
$.each(response.all_groups, function (key, group) {
    // 临时变量存储当前分组的用户HTML
    let groupUserHtml = '';
    $.each(response.all_group_users, function (key, group_user) {
        // 仅匹配当前分组的用户
        if (group_user.group_id === group.group_id) {
            groupUserHtml += '<p>'+group_user.jid+'</p>';
        }
    });
    tbody += '<tr>'+
                '<td><p class="font-weight-bold mb-0">'+group.group_id+'</p>'+group.group_description+'</td>'+
                '<td>'+group.group_type_name+'</td>'+
                '<td>'+ groupUserHtml +'</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>';
});

2. 后端代码调整 #

去掉控制器中固定筛选group_id=113的条件，返回所有未归档分组的用户数据，保证前端能匹配到全部分组对应的用户：

public function fetchgroupuser() {
    $all_group_users = HmsBbrGroupUser::selectRaw('hms_bbr_group_user.id,
                                                   hms_bbr_group_user.group_id,
                                                   hms_bbr_group_user.parent_id,
                                                   hms_bbr_group_user.jid,
                                                   hms_doctor.name ')
    ->leftJoin('hms_bbr_group', 'hms_bbr_group.id', '=', 'hms_bbr_group_user.parent_id')
    ->leftJoin('hms_doctor', 'hms_doctor.jid', '=', 'hms_bbr_group_user.jid')
    // 移除固定group_id筛选
    ->whereNull('hms_bbr_group.archived_by')
    ->get();
    return response()->json([
        'all_group_users'=>$all_group_users,
    ]);
}

内容的提问来源于stack exchange，提问作者user16409170