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?

You're using `delete` to remove element from array, use `splice`. — Tushar, Apr 24 '16 at 16:00
If you wish to reply regarding the duplicate, do it as a comment, not by adding it to the question. You're right, the other question isn't really a duplicate. However, you'll get much better reception if you post relevant code immediately ***and*** make sure the code is a [minimal example](http://stackoverflow.com/help/mcve) that accurately reproduces the issue. — , Apr 24 '16 at 16:34
@squint To be honest, my code is only relevant if seen as a whole (I only included it in a fiddle so that it would improve readability of the question by not taking up too much space). If it is not a duplicate, can the tag be removed? Thank you for the feedback! — arch1ve, Apr 24 '16 at 16:46
Here's a reduced example: https://jsfiddle.net/mtx5Lg1L/3/ All the DOM manipulation and conditionals only get in the way. If you pick things away one by one, you can get it down to something very simplified. Even my demo could be further simplified, but it conveys generally what's happening in your code at its core. — , Apr 24 '16 at 17:00
[This question](http://stackoverflow.com/questions/9974451/why-does-delete-keep-array-elements) is a better duplicate of yours. — , Apr 24 '16 at 17:00

score 1 · Accepted Answer · answered Apr 24 '16 at 16:01

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.

answered Apr 24 '16 at 16:01

Tushar

85,780
21
159
179

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

1 Answers1