Advanced Endpoints and Path Parameters

Introduction and Topic Overview

Hello there! We are about to embark on a fantastic journey, where we will explore Advanced Endpoints and Path Parameters in web development. So, what are these fancy terms all about? Well, when we visit a website or use a web-based application, the interaction process involves sending requests and receiving responses. This interaction takes place across various endpoints . An endpoint holds the details of a user's requests and prompts the web server to deliver a suitable response. Path parameters play a crucial role in these endpoints, making them "advanced." They allow us to interact with web servers more effectively, enabling us to deliver unique requests and receive specific data in return. In our journey, we will uncover the secrets of these advanced endpoints and their components. Our goal for this lesson is to become familiar with the creation of advanced endpoints and understanding the dynamic use of path parameters . Let's get started!

Basics of Endpoints

Endpoints are essentially specific paths or URLs where a web application can access the features or data of a web server. Think of a restaurant's menu. Just as the menu has various dishes (endpoints) you can order (request), with each dish having distinct ingredients (parameters) that you can specify, a web server works similarly! In web terms, suppose you're using CodeSignal to learn programming. When you ask to see the "Courses" page, your browser sends a request to the CodeSignal web server with the particular endpoint for "Courses." In response, the server sends back the information needed to display the "Courses" page. Let's illustrate this using a basic example in Express.js, a popular Node.js web framework: JavaScript const express = require('express'); const app = express(); app.get('/courses', function (req, res) {res.send('You requested the Courses page');}); app.listen(3000, function () {console.log('Example app listening on port 3000!');}); In this example, /courses is an endpoint of our application. When we visit http://localhost:3000/courses in a web browser, we send a GET request to this endpoint, and in return, we receive a response: 'You requested the Courses page.'

Diving into Path Parameters

Path parameters offer a way to insert variable data into our endpoints. Imagine you have a web application with a list of courses, and each course has an id . You want to display detailed information about a particular course when a user clicks on it. How do you achieve that without creating separate endpoints for each course? Here's where path parameters come to the rescue! Let's see how path parameters create a dynamic route in Express.js . JavaScript app.get('/courses/:id', function (req, res) {res.send(`You requested course with id: ${req.params.id}`);}); In this code, :id is a path parameter, and it changes based on which course the user clicks. A single endpoint can now handle requests for any course! For instance, when we visit http://localhost:3000/courses/10, it will display 'You requested course with id: 10.'

Join the 1M+ learners on CodeSignal

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

Handling Requests in Advanced Endpoints

To power up our web application, we must use path parameters to shape the data sent in responses. Let's imagine we have our course data stored in an object. This time, we'll send back the title of the requested course:

JavaScript

const courses = {
  1: 'Maths 101',
  2: 'English 101',
  // More courses...
};

app.get('/courses/:id', function (req, res) {
  if (courses[req.params.id]) {
    res.send(`Course: ${courses[req.params.id]}`);
  } else {
    res.status(404).send('Course not found');
  }
});

const courses = {
  1: 'Maths 101',
  2: 'English 101',
  // More courses...
};

app.get('/courses/:id', function (req, res) {
  if (courses[req.params.id]) {
    res.send(`Course: ${courses[req.params.id]}`);
  } else {
    res.status(404).send('Course not found');
  }
});

Great! Now when we visit http://localhost:3000/courses/1, it will display 'Course: Maths 101.' If we request an invalid id, it sends 'Course not found' with a 404 status code.

Additionally, we can handle different types of errors like server error:

JavaScript

app.get('/courses/:id', function (req, res) {
  try {
    if (courses[req.params.id]) {
      res.send(`Course: ${courses[req.params.id]}`);
    } else {
      res.status(404).send('Course not found');
    }
  } catch (error) {
    res.status(500).send('Server error');
  }
});

app.get('/courses/:id', function (req, res) {
  try {
    if (courses[req.params.id]) {
      res.send(`Course: ${courses[req.params.id]}`);
    } else {
      res.status(404).send('Course not found');
    }
  } catch (error) {
    res.status(500).send('Server error');
  }
});

We can further enhance endpoints by introducing query parameters, often used for filtering or searching. For example:

JavaScript

app.get('/courses', function (req, res) {
  const category = req.query.category;
  if (category) {
    res.send(`You requested courses in category: ${category}`);
  } else {
    res.send('You requested all courses');
  }
});

app.get('/courses', function (req, res) {
  const category = req.query.category;
  if (category) {
    res.send(`You requested courses in category: ${category}`);
  } else {
    res.send('You requested all courses');
  }
});

Now, going to http://localhost:3000/courses?category=math displays 'You requested courses in category: math.' Without a query, it shows 'You requested all courses.'

Introduction and Topic Overview

Basics of Endpoints

Diving into Path Parameters

Join the 1M+ learners on CodeSignal

Advanced Endpoints using Path Parameters

Handling Requests in Advanced Endpoints

Using Axios for HTTP Requests

Lesson Summary and Practice