Filtering Data Using Initial Characters

Welcome back! In the previous lesson, we added the ability to sort todos in our ToDo application. This lesson focuses on enhancing our application further by adding the ability to filter todos. Filtering is an essential feature in any web application, as it improves user experience by making data easier to navigate and find. Today, we will learn how to implement this functionality step-by-step.

What is Filtering?

Before diving deeper, let's briefly remind ourselves of what filtering is. Filtering involves displaying only the data that matches certain criteria, effectively hiding the rest. For example, filtering todos by title initial characters allows users to narrow down the list to items that start with specific letters. In this lesson, we will implement filtering todos based on the initial letters of their titles.

Implementing Filtering in the Service Layer

Let’s start by updating the get_all method in app/services/todo_service.py to support filtering. Here’s the updated method: Pythonfrom models.todo import Todo, db class TodoService: @staticmethod def get_all(sort_by=None, filter_by=None): # Initialize a query on the Todo model query = Todo.query # Apply filtering if filter_by is provided if filter_by: query = query.filter(Todo.title.ilike(f'{filter_by}%')) # Apply sorting if sort_by is 'title' if sort_by == 'title': query = query.order_by(Todo.title) # Execute the query and return all matching todos return query.all() Let's break this down: Initial Query: We start by initializing a query on the Todo model: query = Todo.query. This sets up a base query to build on. Filtering: If filter_by is provided, we filter the query: query = query.filter(Todo.title.ilike(f'{filter_by}%')). Let's break down what this does: ilike: This is a method that performs a case-insensitive match. It checks if the data in Todo.title starts with the specified letters (given in filter_by) without worrying about uppercase or lowercase differences. %: This is a wildcard character used in SQL that matches any sequence of characters. In the context of '{filter_by}%', it ensures that any additional characters after filter_by are included. For example, if filter_by is "A", it will match titles like "Apple", "Ascend", etc. Sorting: If sort_by is set to 'title', we sort the results: query = query.order_by(Todo.title). This arranges the todos alphanumerically by their titles. Fetching Results: Finally, return query.all() executes the query and returns all matching todos. The order of operations is important here: filtering is applied first, and then sorting. This ensures that we can perform both actions together or each individually based on the provided parameters, making our service layer highly flexible for various user needs.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Updating the Controller to Handle Filtering

Now, we’ll modify app/controllers/todo_controller.py to capture the filter parameter from the URL and pass it to our updated service method.

Here’s the updated controller:

Python

from flask import Blueprint, render_template, request, redirect, url_for
from services.todo_service import TodoService

todo_service = TodoService()
todo_controller = Blueprint('todo', __name__)

@todo_controller.route('/', methods=['GET'])
def list_todos():
    # Capture sort and filter parameters from the URL
    sort_by = request.args.get('sort_by')
    filter_by = request.args.get('filter_by')
    # Fetch sorted and filtered todos
    todos = todo_service.get_all(sort_by=sort_by, filter_by=filter_by)
    # Render the todo list template with the todos
    return render_template('todo_list.html', todos=todos)

from flask import Blueprint, render_template, request, redirect, url_for
from services.todo_service import TodoService

todo_service = TodoService()
todo_controller = Blueprint('todo', __name__)

@todo_controller.route('/', methods=['GET'])
def list_todos():
    # Capture sort and filter parameters from the URL
    sort_by = request.args.get('sort_by')
    filter_by = request.args.get('filter_by')
    # Fetch sorted and filtered todos
    todos = todo_service.get_all(sort_by=sort_by, filter_by=filter_by)
    # Render the todo list template with the todos
    return render_template('todo_list.html', todos=todos)

Let's break this down:

Capturing Parameters:
- We capture the sort_by and filter_by parameters from the URL query string using sort_by = request.args.get('sort_by') and filter_by = request.args.get('filter_by'). This allows us to dynamically read these values whenever a GET request is made to the root route (/). These parameters can be None, meaning that if no sort or filter criteria are provided, all todos will be returned.
Fetching Filtered Data:
- We call todo_service.get_all(sort_by=sort_by, filter_by=filter_by) with the captured parameters. This fetches the todos based on the sort and filter criteria specified by the user. If the parameters are None, the method will return all todos.
Rendering the Template:
- We render the todo_list.html template with the fetched todos using return render_template('todo_list.html', todos=todos). This passes the filtered and possibly sorted list of todos to the template for display.

Modifying the Template for User Input

The final step is to modify app/templates/todo_list.html to add filter options in the form, enabling users to input their preferences.

Here’s the updated template:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>
<body>
    <h1>Todo List</h1>

    <!-- Form for filtering and sorting todos -->
    <form action="{{ url_for('todo.list_todos') }}" method="GET">
        <div class="form-group">
            <label for="sort_by">Sort by:</label>
            <select id="sort_by" name="sort_by">
                <option value="" selected>None</option>
                <option value="title">Title</option>
            </select>
        </div>
        <div class="form-group">
            <label for="filter_by">Filter by initial letters:</label>
            <input type="text" id="filter_by" name="filter_by" placeholder="Enter letters...">
        </div>
        <button type="submit">Apply</button>
    </form>

    <!-- List all todos... -->
    
    <!-- Form for adding a new todo... -->

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>
<body>
    <h1>Todo List</h1>

    <!-- Form for filtering and sorting todos -->
    <form action="{{ url_for('todo.list_todos') }}" method="GET">
        <div class="form-group">
            <label for="sort_by">Sort by:</label>
            <select id="sort_by" name="sort_by">
                <option value="" selected>None</option>
                <option value="title">Title</option>
            </select>
        </div>
        <div class="form-group">
            <label for="filter_by">Filter by initial letters:</label>
            <input type="text" id="filter_by" name="filter_by" placeholder="Enter letters...">
        </div>
        <button type="submit">Apply</button>
    </form>

    <!-- List all todos... -->
    
    <!-- Form for adding a new todo... -->

</body>
</html>

The key addition here is the text input field to filter todos by the initial letters of their titles. If no sorting option or filter is selected, the submit button will send None to both parameters, resulting in all todos being returned. These enhancements enable users to specify their sorting and filtering preferences, while still allowing for all items to be displayed if no specific options are chosen.