JQuery: using a for each function inside another different for each function – Jquery ajax

First of all, I will be showing the for each that I will be using inside another for each as mentioned to show that there is data:

the for each in question (the dropdown)

Ajax function:

(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)
        }
    });
})();

Now for the table, this example is to show that the for each inside the for each on top works. The difference is that I am using the exact same one:

Code:

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>';
});

this is the for each line:

$.each(response.all_groups, function(key, group) {
  tbody+='<p>yes</p>'
});

the screenshot below shows that it works:

Now here is my issue, by adding a separate for each, I assume of course that I need to declare the function first before using a for each, my problem is that it returns blank. I am not sure if I positioned the code wrong or I need to add something else because as stated by my first example, response.all_group_type_names have data and works in another part of my 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>';
});

Output below: (blank)

• note that I added console.log to the for each to show that the data is still there but there is no output in the UI.

Thank you in advance for any help.

Update:

to avoid any confusion, I will show the full function below. As you can see I have two ajax GET for both `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)
        }
    });
}

UPDATE:

Here is what I got so far:

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)
        }
    });
}

As you can see, it should show in the UI but it is only showing up in the console.log. Ignore the null, it only means the list will contain 3 rows with 2 blanks.

tbody+='<p>'+group_type_user.name+'</p>'
console.log(group_type_user.name);

is what I tried to output the data in the UI and console.log is the working one as seen in the screenshot.