console.log(array) returns empty, but console.log(array.length) doesn't return 0

Question

I have the following javascript

var filtered = [];

$('#footballCheck').on('change', function() {
  if ($('#footballCheck').is(':checked')) {
    for (var i = 0; i < fa_names.length; i++) {
      if (fa_names[i]["facility_activity"].toLowerCase().indexOf("football") >= 0) {
        filtered.push(fa_names[i]);
      }
    }

    filtered.sort(SortByName);
    $('#mCSB_1_container').empty(".facility-name");
    for (var k = 0; k < filtered.length; k++) {
      $('#mCSB_1_container').append('<div class="row facility-name">\
                                             <button class="btn btn-default btn-fill btn-menu" date-name="' + filtered[k]["facility_name"] + '">' + filtered[k]["facility_name"] + '</button></div>');
      $('#facilities-body').mCustomScrollbar("update");
    }
  } else {
    for (var j = 0; j < filtered.length; j++) {
      if (filtered[j]["facility_activity"].toLowerCase().indexOf("football") >= 0) {
        delete filtered[j];
      }
    }
    console.log(filtered);
    console.log(filtered.length);
    if (filtered.length > 0) {
      filtered.sort(SortByName);
      $('#mCSB_1_container').empty(".facility-name");
      for (var k = 0; k < filtered.length; k++) {
        $('#mCSB_1_container').append('<div class="row facility-name">\
                                                 <button class="btn btn-default btn-fill btn-menu" date-name="' + filtered[k]["facility_name"] + '">' + filtered[k]["facility_name"] + '</button></div>');
        $('#facilities-body').mCustomScrollbar("update");
      }
    } else {
      $('#mCSB_1_container').empty(".facility-name");
      for (k = 0; k < fa_names.length; k++) {
        $('#mCSB_1_container').append('<div class="row facility-name">\
                                                 <button class="btn btn-default btn-fill btn-menu" date-name="' + fa_names[k]["facility_name"] + '">' + fa_names[k]["facility_name"] + '</button></div>');
        $('#facilities-body').mCustomScrollbar("update");
      }
    }
  }
});

that should do the following:

• If the checkbox is checked, go through another array and push all objects whose key value "facility_activity" contains "football" to the filtered array
• If it is unchecked, then remove all objects from filtered array whose key value "facility_activity" contains "football"
• If it is unchecked and its length is > 0 (meaning that there are still filtered objects) print those
• If it is unchecked and the filtered array is empty, then append all items from the parent array (the one that is not filtered)

Here is the fiddle.

Background: The checkboxes act as filters for a search and the filtered array stores those filtered values (in no other place other than what is in that fiddle the filtered array is changed yet).

My problem is that console.log(filtered) returns [] and console.log(filtered.length) does NOT return 0 and it should. Why does this happen and how can I fix it?

Answer 1

delete on array doesn't change the length of array. It just sets the element value to undefined. Use splice to remove element from array.