26 Adding an API to your application

This lesson shows how to evolve a traditional Express.js app into one that cleanly exposes an API while preserving existing pages. It starts by reorganizing routing for clarity and maintainability, then adds the ability for controllers to return JSON as well as rendered EJS views, and finally demonstrates consuming that JSON from the browser with Ajax so pages can update without full reloads. The result is a structure that supports both server-rendered pages and programmatic data access for internal features or external clients.

You begin by modularizing routes with express.Router into separate files per resource (users, subscribers, courses, home, errors) and aggregating them in a central index that applies namespaces like /users, /subscribers, and /courses. This namespacing keeps paths consistent with RESTful conventions and makes route ownership obvious, while leaving home and error routes un-namespaced. The lesson emphasizes middleware and route order: mount the combined router in main.js with app.use('/', router), keep detailed routes before error handlers, and ensure the app’s middleware (parsers, templating) runs before the router. Within each module, paths omit the resource prefix because the index router supplies it.

To create the API, selected controller actions conditionally return JSON when a query parameter (for example, format=json) is present, otherwise rendering the usual EJS view. This enables endpoints that external consumers can call and also powers in-app features. On the client, a small script wires a button to make an Ajax GET to a JSON endpoint, then populates a modal with returned records (such as course titles and descriptions), illustrating how to refresh content dynamically without navigating away. The chapter closes by suggesting you extend the same conditional JSON approach to other index and show actions, noting that show returns a single record rather than an array.

Display of JSON course results in browser

Display of courses in MongoDB

Simple modal button in navigation bar

Populating course data within modal

FAQ

const router = require('express').Router();
const usersController = require('../controllers/usersController');

router.get('/', usersController.index, usersController.indexView);
router.get('/new', usersController.new);
router.post('/create', usersController.validate, usersController.create, usersController.redirectView);
router.get('/login', usersController.login);
router.post('/login', usersController.authenticate);
router.get('/logout', usersController.logout, usersController.redirectView);
router.get('/:id/edit', usersController.edit);
router.put('/:id/update', usersController.update, usersController.redirectView);
router.get('/:id', usersController.show, usersController.showView);
router.delete('/:id/delete', usersController.delete, usersController.redirectView);

module.exports = router;

const router = require('express').Router(),
  userRoutes = require('./userRoutes'),
  subscriberRoutes = require('./subscriberRoutes'),
  courseRoutes = require('./courseRoutes'),
  errorRoutes = require('./errorRoutes'),
  homeRoutes = require('./homeRoutes');

router.use('/users', userRoutes);
router.use('/subscribers', subscriberRoutes);
router.use('/courses', courseRoutes);
router.use('/', homeRoutes);
router.use('/', errorRoutes);

module.exports = router;

indexView: (req, res) => {
  if (req.query.format === 'json') {
    res.json(res.locals.courses);
  } else {
    res.render('courses/index');
  }
}

$(document).ready(() => {
  $('#modal-button').click(() => {
    $('.modal-body').html('');
    $.get('/courses?format=json', (data) => {
      data.forEach(course => {
        $('.modal-body').append(
          `<div><span class='course-title'>${course.title}</span>
           <div class='course-description'>${course.description}</div></div>`
        );
      });
    });
  });
});