Calculate the size of an array after applying a filter operation

Question

Calculate the size of an array after applying a filter operation

I have created an if statement that filters the array based on user input, acting as a search bar for the array.

var filter = userInput.value.toUpperCase();
for (var i = 0; i < myArrayElements.length; i++) {
    if (myArrayElements.toUpperCase().indexOf(filter) != -1)  {
        myArrayElements[i].style.display = 'list-item';
    } else {
        myArrayElements[i].style.display = 'none';      
    }
}

Now, I am looking to determine the length of the filtered array and use it in the global scope.

I attempted to do this within the if statement:

var arrayLength = myArrayElements[i].length;
return arrayLength;

and

console.log(myArrayElements[i].length);

However, both attempts resulted in console errors.

Edit: Nina Scholz's response provided the correct length of the array and presented a great example. Additionally, other responses suggesting the use of .filter() are also valuable. Thank you all!

javascript arrays

Answer 1

Answer №1

You might consider using a variable to keep track of the count.

var filter = userInput.value.toUpperCase(),
    count = 0;

for (var i = 0; i < myArrayElements.length; i++) {
    if (myArrayElements[i].toUpperCase().indexOf(filter) != -1)  {
        // ^^^^^^^^^^^^^^^ only if that is really a string!!!
        myArrayElements[i].style.display = 'list-item';
        count++;
    } else {
        myArrayElements[i].style.display = 'none';      
    }
}

Here's an example in action:

function find() {    
    var filter = document.getElementById('search').value.toUpperCase(),
        count = 0,
        myArrayElements = document.getElementsByTagName('li');        

    for (var i = 0; i < myArrayElements.length; i++) {
         if (myArrayElements[i].innerHTML.toUpperCase().indexOf(filter) != -1)  {
              myArrayElements[i].style.display = 'list-item';
              count++;
         } else {
             myArrayElements[i].style.display = 'none';      
         }
    }
    console.log(count);
}

<input id="search" > <button onclick="find()">find</button>
<ul>
<li>test</li>
<li>test-case</li>
<li>42</li>
<li>Test</li>
</ul>

Answer 2

You might consider using a variable to keep track of the count.

var filter = userInput.value.toUpperCase(),
    count = 0;

for (var i = 0; i < myArrayElements.length; i++) {
    if (myArrayElements[i].toUpperCase().indexOf(filter) != -1)  {
        // ^^^^^^^^^^^^^^^ only if that is really a string!!!
        myArrayElements[i].style.display = 'list-item';
        count++;
    } else {
        myArrayElements[i].style.display = 'none';      
    }
}

Here's an example in action:

function find() {    
    var filter = document.getElementById('search').value.toUpperCase(),
        count = 0,
        myArrayElements = document.getElementsByTagName('li');        

    for (var i = 0; i < myArrayElements.length; i++) {
         if (myArrayElements[i].innerHTML.toUpperCase().indexOf(filter) != -1)  {
              myArrayElements[i].style.display = 'list-item';
              count++;
         } else {
             myArrayElements[i].style.display = 'none';      
         }
    }
    console.log(count);
}

<input id="search" > <button onclick="find()">find</button>
<ul>
<li>test</li>
<li>test-case</li>
<li>42</li>
<li>Test</li>
</ul>

Answer 3

Answer №2

If you want to change the style and filter an array at the same time, you can utilize the .filter() method.

var searchTerm = userInput.value.toLowerCase(),
filterFunction = function(item) {
  if (item === searchTerm) {
    item.style.display = 'block';
    return true;
  } else {
    item.style.display = 'none';
    return false;
  }
}

var filteredItemsCount = myArray.filter(filterFunction).length;

Answer 4

If you want to change the style and filter an array at the same time, you can utilize the .filter() method.

var searchTerm = userInput.value.toLowerCase(),
filterFunction = function(item) {
  if (item === searchTerm) {
    item.style.display = 'block';
    return true;
  } else {
    item.style.display = 'none';
    return false;
  }
}

var filteredItemsCount = myArray.filter(filterFunction).length;

Answer 5

Answer №3

If you want to selectively display elements based on a certain condition, consider using the filter function

The filter() method creates a new array with all elements that meet the criteria specified by the provided function.

var newArray = myArrayElements.filter(function(value, index, array) {
  return value.toUpperCase() === filter;
});
var newArrayLength = newArray.length;

It should be noted that this solution only addresses the filtering aspect and not the logic within the loop. To achieve both, set all elements in myArrayElements as display:none; by default and then execute:

var newArray.forEach(function(value, index, array) {
  value.style.display = 'list-item';
});

Alternatively, you can utilize forEach() from the beginning:

var filter = userInput.value.toUpperCase(),
    count = 0;

myArrayElements.forEach(function(value, index, array) {
  (value.toUpperCase() === filter) ? value.style.display = 'list-item' : value.style.display = 'none';
  count ++;
});

Answer 6

If you want to selectively display elements based on a certain condition, consider using the filter function

The filter() method creates a new array with all elements that meet the criteria specified by the provided function.

var newArray = myArrayElements.filter(function(value, index, array) {
  return value.toUpperCase() === filter;
});
var newArrayLength = newArray.length;

It should be noted that this solution only addresses the filtering aspect and not the logic within the loop. To achieve both, set all elements in myArrayElements as display:none; by default and then execute:

var newArray.forEach(function(value, index, array) {
  value.style.display = 'list-item';
});

Alternatively, you can utilize forEach() from the beginning:

var filter = userInput.value.toUpperCase(),
    count = 0;

myArrayElements.forEach(function(value, index, array) {
  (value.toUpperCase() === filter) ? value.style.display = 'list-item' : value.style.display = 'none';
  count ++;
});

Calculate the size of an array after applying a filter operation

Answer №1

Answer №2

Answer №3

Similar questions

PHP failing to recognize ajax request

How Meteor Handles HTTP Requests in its package.js File

"Unlock the full potential of GrapesJs UI with these advanced customization tips

Combine the information from another cell and add it to the current cell with additional data

The problem with Vue JS static links

The onFocus event ceases to trigger once the modal popup appears

Sending an array using the POST method with Ajax

Having trouble with Three.js loading gltf file?

The behavior of AJAX Search varies between the development and production environments

"Enhancing Event Handling with JQuery Delegate on Internet Explorer

I'm trying to retrieve information from openweathermap in order to show it on my app, but I keep running into an error that says "Uncaught RangeError: Maximum

Preserve final variable state - Angular

At times, an InvalidArgumentError occurs stating: "The 'handle' parameter must be a string."

Retrieve two arrays from PHP files, analyze their differences, and store the variances in a separate array

Tips for locating a value that differs from an item in a v-autocomplete box

Issue with Material UI Textfield error functionality in React.js not functioning correctly

"Learn how to use jQuery to retrieve a specific row from an HTML table based on equality with a certain

How to retrieve static attributes while declaring an interface

Converting and storing Canvas data as a blob, and then saving the blob as

Component encounters issue with undefined props being passed