Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

ember

How to specify query parameters in Ember.js controllers

Educative Team

Overview

Have you ever wondered how online stores sort and filter products according to particular criteria, such as product color or price? Similarly, have you ever wondered how websites jump to a specific page number inside an archive of web pages? Well, these actions and many others are performed by specifying query parameters inside a URL.

What are query parameters? They can be thought of as key-value pairs that can be optionally appended to the end of a query string or URL to perform certain actions such as filtering and sorting products on a web page.

Note: The query string or URL is first appended with a ? at the end. Afterward, the key-value pairs, separated by &, are added towards the right of ?.

Let’s suppose we are searching for blue shoes of size six on a website. Our URL will then look like this:

https://dummyShoes.com?color=blue&size=6

In the URL above, color=blue and size=6 are the query parameters.

Using query parameters in controllers

When creating applications using Ember.js, we can define and use query parameters in controllers that map URLs to particular templates. Such controllers are called route-driven controllers in Ember.js.

Note: We have to define active query parameters for a particular route inside its controller. For instance, let’s suppose we have a shoe route. We will define the active query parameters for the shoe route in the shoe controller.

Example

Let’s suppose that we want to add the following two query parameters for the shoe route that will filter out the shoes:

  • Color query parameter

  • Size query parameter

We will define color and size as the active query parameters inside the shoe controller.

import Controller from '@ember/controller';

export default class ShoeController extends Controller {
  queryParams = ['color', 'size'];
  color = null;
  size = null;
}
Shoe controller

The code snippet above has defined a mapping between the parameters color and size in the URL and the properties color and size in the shoe controller. Now, if the user makes any changes to the parameters color and size inside the URL, the changes will be reflected in the properties color and size of the shoe controller and vice versa.

Note: It should be noted that queryParams needs to be in the form of value(s), i.e., it cannot be a dynamically generated property.

The next step is to define a getter function. This function will return the array containing filtered shoe data based on color and size. We also need to mark the properties color and size as tracked. In addition to this, we also need to mark the main shoe model that contains all the shoe data as tracked. This will help the getter function to recalculate data if any values change.

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

export default class ShoeController extends Controller {
  queryParams = ['color', 'size'];

  @tracked color = null;
  @tracked size = null;
  @tracked model;

  get queryParamsShoeData() {
    let color = this.color;
    let size = this.size;
    let shoes = this.model;

    if (color) {
      return shoes.filterBy('color', color);
    } else if (size) {
      return shoes.filterBy('size', size); 
    } else if (color && size) {
      return shoes.filterBy('color', color).filterBy('size', size)
    } else {
      return shoes;
    }
  }
}
Updated shoe controller

Explanation

In the code snippet above:

  • Lines 1-2: We import the required libraries.

  • Line 5: We define the active query parameters inside the shoe controller.

  • Lines 7-9: We mark color, size, and model as tracked.

  • Lines 12-14: We extract color, size, and model from the current object and assign them to the controller properties.

  • Lines 11-25: We define a getter function queryParamsShoeData that will return filtered shoe data based on color and size. The filtered array will be returned depending on the route the user visits:

    • /shoes route will return the unfiltered array of shoes.

    • /shoes?color=blue will return the filtered array of blue shoes.

    • /shoes?size=6 will return the filtered array of shoes of size six.

    • /shoes?color=blue&size=6 will return the filtered array of blue shoes of size six.

RELATED TAGS

ember
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring