Introduction to Path and Query Parameters with JavaScript

Introduction to Path and Query Parameters

Welcome to another lesson in this course. In our previous lessons, we established a foundation by learning about RESTful APIs and making GET requests. Now, we will shift our focus to path and query parameters, essential tools for refining API requests and fetching specific data. Path and query parameters play a crucial role in making your API requests more precise and efficient. Imagine you are shopping online: selecting a specific item using its ID is akin to a path parameter, while filtering items by categories like price or color resembles query parameters. In this lesson, we'll explore these concepts with practical examples, empowering you to extract just the information you need from an API.

Understanding Path Parameters

Path parameters are part of the URL used to access specific resources within an API, acting like unique identifiers. For example, if you want to retrieve a to-do item with ID 3, the URL would be structured as follows: text http://localhost:8000/todos/3 http://localhost:8000/todos/3 In this case, 3 is the path parameter specifying the particular item you wish to access.

Understanding Query Parameters

Query parameters are added to the URL after a ? to filter or modify the data returned by the API. They are formatted as key-value pairs. For instance, if you want to list only the completed to-do tasks, your request would be: text http://localhost:8000/todos?done=true http://localhost:8000/todos?done=true Here, done=true is the query parameter filtering the results to include only tasks that are marked as completed.

Setup Recap

Before jumping into implementing these parameters using JavaScript, let's set up an HTTP request using the Fetch API . Ensure you have your base URL ready: JavaScript // Base URL for the API const baseUrl = "http://localhost:8000"; // Base URL for the API const baseUrl = "http://localhost:8000"; Now we're all set to dive into the code examples!

Fetching Data with Path Parameters

Path parameters are used to target specific resources within an API, allowing you to access individual items directly. They are appended directly to the endpoint URL. For instance, if you want to fetch details of a specific to-do item using its ID, you'd use a path parameter. Here's a practical example using ID 3 : JavaScript // Define the ID of the todo item you want to retrieve const todoId = 3; // Create an async function to perform the GET request async function fetchTodoById() {try {const response = await fetch(`${baseUrl}/todos/${todoId}`); // Check if the request was successful if (!response.ok) {throw new Error(`Error fetching the todo with path parameter. Status Code: ${response.status}`);} const todo = await response.json(); // Print all details of the todo item console.log(`ID: ${todo.id}`); console.log(`Title: ${todo.title}`); console.log(`Description: ${todo.description}`); console.log(`Done: ${todo.done}`);} catch (error) {console.error('Error Details:', error);}} // Call the async function fetchTodoById(); In this example, todoId is a path parameter specifying the to-do item with ID 3 . If successful, you'll get an output displaying the task details, demonstrating how path parameters enable you to access individual resources accurately.

Join the 1M+ learners on CodeSignal

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

text

http://localhost:8000/todos/3

text

http://localhost:8000/todos?done=true

JavaScript

// Base URL for the API
const baseUrl = "http://localhost:8000";

JavaScript

// Define the ID of the todo item you want to retrieve
const todoId = 3;

// Create an async function to perform the GET request
async function fetchTodoById() {
    try {
        const response = await fetch(`${baseUrl}/todos/${todoId}`);
        
        // Check if the request was successful
        if (!response.ok) {
            throw new Error(`Error fetching the todo with path parameter. Status Code: ${response.status}`);
        }
        
        const todo = await response.json();
        
        // Print all details of the todo item
        console.log(`ID: ${todo.id}`);
        console.log(`Title: ${todo.title}`);
        console.log(`Description: ${todo.description}`);
        console.log(`Done: ${todo.done}`);
    } catch (error) {
        console.error('Error Details:', error);
    }
}

// Call the async function
fetchTodoById();

JavaScript

// Create an async function to fetch todos with a query parameter
async function fetchCompletedTodos() {
    try {
        const response = await fetch(`${baseUrl}/todos?done=true`);
        
        // Check if the request was successful
        if (!response.ok) {
            throw new Error(`Error fetching todos with query parameter. Status Code: ${response.status}`);
        }
        
        const todos = await response.json();
        
        // Print the todo items
        todos.forEach(todo => {
            console.log(`- ${todo.id}: ${todo.title}`);
        });
    } catch (error) {
        console.error('Error Details:', error);
    }
}

// Call the async function
fetchCompletedTodos();

JavaScript

// Create an async function to fetch todos with multiple query parameters
async function fetchFilteredTodos() {
    try {
        // Define the multiple query parameters
        const params = new URLSearchParams({
            done: "true",
            title: "c"
        });

        const response = await fetch(`${baseUrl}/todos?${params.toString()}`);
        
        // Check if the request was successful
        if (!response.ok) {
            throw new Error(`Error fetching todos with multiple query parameters. Status Code: ${response.status}`);
        }
        
        const todos = await response.json();
        
        // Print the filtered todo items
        todos.forEach(todo => {
            console.log(`- ${todo.id}: ${todo.title}`);
        });
    } catch (error) {
        console.error('Error Details:', error);
    }
}

// Call the async function
fetchFilteredTodos();

JavaScript

// Create an async function to fetch todos with a query parameter
async function fetchCompletedTodos() {
    try {
        const response = await fetch(`${baseUrl}/todos?done=true`);
        
        // Check if the request was successful
        if (!response.ok) {
            throw new Error(`Error fetching todos with query parameter. Status Code: ${response.status}`);
        }
        
        const todos = await response.json();
        
        // Print the todo items
        todos.forEach(todo => {
            console.log(`- ${todo.id}: ${todo.title}`);
        });
    } catch (error) {
        console.error('Error Details:', error);
    }
}

// Call the async function
fetchCompletedTodos();

JavaScript

// Create an async function to fetch todos with multiple query parameters
async function fetchFilteredTodos() {
    try {
        // Define the multiple query parameters
        const params = new URLSearchParams({
            done: "true",
            title: "c"
        });

        const response = await fetch(`${baseUrl}/todos?${params.toString()}`);
        
        // Check if the request was successful
        if (!response.ok) {
            throw new Error(`Error fetching todos with multiple query parameters. Status Code: ${response.status}`);
        }
        
        const todos = await response.json();
        
        // Print the filtered todo items
        todos.forEach(todo => {
            console.log(`- ${todo.id}: ${todo.title}`);
        });
    } catch (error) {
        console.error('Error Details:', error);
    }
}

// Call the async function
fetchFilteredTodos();

Introduction to Path and Query Parameters

Understanding Path Parameters

Understanding Query Parameters

Setup Recap

Fetching Data with Path Parameters

Join the 1M+ learners on CodeSignal

Filtering Data with Query Parameters

Using Multiple Query Parameters

Summary and Preparing for Practice