0

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)

1

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:

2

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.

3

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

4

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.

  • It is a good practice to use a unique name for each `key` and `value` when nesting `$.each()` inside another `$.each()`. – Twisty Oct 13 '21 at 22:48

2 Answers2

0

There's two issues here. Firstly the AJAX request returns the same content for every iteration of the loop, therefore putting it in the loop is redundant. A single request can be sent and from there you can build the HTML once and append it within the loop.

Secondly, the AJAX request is asynchronous, so you will need to perform the call, build the HTML based on the result and then finally append it to the DOM when all that logic has completed.

Given the above, try the following example:

$.ajax({
  type: "GET",
  url: "/clinical/bbr-group-configuration-group-list-type-name",
  dataType: "json",
  success: function(response) {
    let groupNames = response.all_group_type_names.map(groupType => '<p>' + groupType.group_type_name + '</p>').join('');
    let rowHtml = response.all_groups.map(group => '<tr>' +
      '<td><p class="font-weight-bold mb-0">' + group.group_name + '</p>' + group.group_description + '</td>' +
      '<td>' + group.group_type_name + '</td>' +
      '<td>' + groupNames + '</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>').join('');

    $('#group-type-form select').html(rowHtml)
  });
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • I think I need to clear things out a bit: first of all, I do not need to get this tag: `$('#group-type-form select').html(rowHtml)` I just want the list of the names in my column in `` –  Oct 05 '21 at 08:14
  • I also updated the question, I actually have a `GET` for the first for each as well –  Oct 05 '21 at 08:16
  • If you have two get requests then you'll need to send both and execute the logic above when both have responded: https://stackoverflow.com/q/4368946/519413 – Rory McCrossan Oct 05 '21 at 08:17
  • I will be testing out using your example, but I am still struggling to understand since I already have the first ajax request before `success: function (response){` as seen in my updated example –  Oct 05 '21 at 08:43
  • Also I am not quite sure how your given example loops my data to my UI table –  Oct 05 '21 at 08:48
  • Ah yes, I missed a `map()` call - updated – Rory McCrossan Oct 05 '21 at 08:50
  • the link you gave has a great example. however is there any possible way for my current code example to just show the output in my `.each`? I would just like to see if it works since the list of the `group_type_name` is already in the `console.log` –  Oct 05 '21 at 09:04
0

Based on Rory McCrossan answers , could it works ? is a $.when with two calls and then the foreachs with the asnwers.

  $.when($.get("/clinical/bbr-group-configuration-group-list/"+current_category_id+"/"+current_status, "json"), $.get("/clinical/bbr-group-configuration-group-user-list", "json")).then(function (resp1, resp2) {
       var tbody = "";
        $.each(resp1.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(resp2.all_group_users, function (key, group_type_user) {
                            tbody+='<p>'+group_type_user.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)
Jordi Jordi
  • 461
  • 3
  • 10