Getting length of <li> when using Bootstrap 4 tab-content

Question

I am a bit stuck on this. I am trying to get the length of a list using Bootstrap 4's tab-content. Since the tab is not active on page load, the length is 0. When I open the tab, it is still 0.

I added the html that gets printed as well as the ajax call to get the data.

// print applicant status
if (applicantStatus == 'true') {
  $('#aStatus').html('Applicant');

  // video module count
  var totalModCount = $("#vidList").find("li").length;
  console.log(totalModCount); // 0 Supposed to be 9
  $('#totalCount').html(totalModCount)

  // form total count
  var totalFormCount = $("#vidList").find("li").length;
  console.log(totalFormCount); // 0 Supposed to be 4
  $('#formTotalCount').html(totalFormCount);
}
else {
  $('#aStatus').html('Employee');
};

var listOfTypes = "";
$.each(parsedData, function (index, item) {

  var dateOfCompletion = moment(item.DateCompleted).format('MM/DD/YYYY');
  lastAttempt = moment(item.DateOfExam).format('MM/DD/YYYY');
  isValid = item.Valid;
  isOrientation = item.IsOrientation;
  isInservice = item.IsInservice;

  if (applicantStatus == "true") {
    if (isOrientation) {
      if (isValid) {
        if (item.IsComplete == true) {
          listOfTypes += "<li class='list-group-item disabled videoItem text-success'><a class='video-btn gray' data-toggle='modal' data-src='" + item.URL
          listOfTypes += "' id='tID_" + item.TypeID + "' href='#myModal'>";
          listOfTypes += item.TypeName + "</a>";
          listOfTypes += "<br><p id='typeStatus' value='" + item.TypeID + "' class='completionDate'>Completed on: " + dateOfCompletion + "</p></li>";

        }
        else {
          listOfTypes += "<li class='list-group-item videoItem'><a class='video-btn' data-toggle='modal' data-src='" + item.URL
          listOfTypes += "' id='tID_" + item.TypeID + "' href='#myModal'>";
          listOfTypes += item.TypeName + "</a>";
          listOfTypes += "<br><p id='typeStatus' value='" + item.TypeID + "' class='timeDuration'>Time Duration: " + item.Duration + "</p></li>";
        }
      }
      else {
        listOfTypes += "<li class='list-group-item d-none videoItem'><a class='video-btn' data-toggle='modal' data-src='" + item.URL
        listOfTypes += "' id='tID_" + item.TypeID + "' href='#myModal'>";
        listOfTypes += item.TypeName + "</a>";
      }
    }
  }
});

<div class='tab-content'>
  <div id="videoList" class="tab-pane fade">
    <ul class='list-group' id='vidList'>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
    </ul>
  </div>
  <div id="formsList" class="tab-pane fade">
    <ul class='list-group' id='fList'>
      <li class="list-group-item formItem"></li>
      <li class="list-group-item formItem"></li>
      <li class="list-group-item formItem"></li>
      <li class="list-group-item formItem"></li>
    </ul>
  </div>
</div>

Answer 1

If the call is asynchronous , you need to check after you have loaded the tabs. So take the below code and its respective function into the callback function of the async call and check.

var totalModCount = $("#vidList").find("li").length;

Until then it's going to be empty.

Answer 2

I imagine that the lists are loaded from an ajax call? in this case the code you entered must be executed at the callback in the success of the call

$ajax({
    url : '',
    type: ...,
    success : function(response) {
    // add the <li> </li> AND THEN DO THE COUNT
    var totalModCount = $("#vidList").find("li").length;
    }

})

Answer 3

This is what I had to do to make it work.

Thank you everyone for your help. I believe my explanations were very confusing, but your input helped me land the answer.

var completedCount = parsedData.filter(function (item) {
  if (item.Valid == true) {
    return item.IsComplete
  }
}).length;
$('#completionCount').html(completedCount);

// totalCount
var totalCount = parsedData.filter(function (item) {
  if (item.IsOrientation == true && item.Valid == true) {
    return item.IsOrientation
  }
}).length;
$('#totalCount').html(totalCount);