Скачать или смотреть How to Filter and Reset a List of Items in JavaScript: Show only Items that Ends with "rouges"

Discover how to filter a list in JavaScript to display only items that end with `rouges`. Learn also how to reset the list and sort it alphabetically with simple button clicks!
---
This video is based on the question https://stackoverflow.com/q/69692448/ asked by the user 'Juan' ( https://stackoverflow.com/u/15566171/ ) and on the answer https://stackoverflow.com/a/69692680/ provided by the user 'DecPK' ( https://stackoverflow.com/u/9153448/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Show li's including a particular string and hide does who don't

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Filtering and Resetting a List in JavaScript

When coding in JavaScript, it’s common to need to filter through lists of items based on certain criteria. Imagine you have a list of food items and you only want to showcase those that end with the word "rouges". In this blog, we’ll learn how to accomplish this filtering and how to reset the list, including sorting it alphabetically if a filter has been applied.

The Problem

You have an unordered list (ul) with several list items (li), and you want to only show the items that end with the word "rouges". Specifically, the examples given are "Fruits rouges" and "Haricots rouges". Additionally, you want to create a second button to reset the filtered list to show all items sorted alphabetically. This process can seem a little daunting at first, but using JavaScript's built-in methods makes it manageable.

Here’s how your list looks:

[[See Video to Reveal this Text or Code Snippet]]

To address these requirements, let’s break it down into manageable steps.

Step-by-Step Solution

1. Setting up the Buttons

First, we need to create the buttons that will trigger the actions for filtering and resetting the list.

[[See Video to Reveal this Text or Code Snippet]]

2. JavaScript Code to Filter Items

Now, let’s use JavaScript to filter the items in our list based on the condition that they must end with "rouges". We can achieve this using the endsWith function.

Here is how you can do it:

[[See Video to Reveal this Text or Code Snippet]]

3. Resetting the List with Sorting

Now, let’s add a functionality to reset the list and show every item while sorting the results alphabetically. This can be done by capturing the click event on the second button (bouton5).

[[See Video to Reveal this Text or Code Snippet]]

4. Resetting to Original List

Lastly, we need a third button to completely reset the list:

[[See Video to Reveal this Text or Code Snippet]]

Complete Code Example

Combining everything above, your complete code should look like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

In this post, we covered how to filter a list in JavaScript to only show items that end with the string "rouges" and how to create a reset functionality to get back to the original list sorted alphabetically. With these techniques, you'll be able to implement similar functionality in your projects easily.

Now you can experiment with this code! Happy coding!