Bootcamp
Search…
5.ICE.2: AJAX

Introduction

Create an app that renders page elements with AJAX.

Setup

  1. 1.
    Clone the ajax-bootcamp repo​
  2. 2.
    Install NPM packages with npm i
  3. 3.
    Update config/config.js with our Unix username
  4. 4.
    Create a Postgres DB with the DB name in config/config.js if we haven't already.
  5. 5.
    Initialise the DB with Sequelize migrate and seed commands
  6. 6.
    Run the app and test the /items route in the browser: http://localhost:3004/items. The starter code contains seed data for items, and a single route /items.

Base

Create a route at the root (/) path that renders an HTML page with a button. When a user clicks the button, make an AJAX request to /items and use the response data to render an HTML element for each item.

Comfortable

  1. 1.
    Update our frontend code such that the AJAX request to /items displays a button for each item.
  2. 2.
    Create a new server route for individual items /items/:id that responds with the relevant item's description. We recognise that we may already have item descriptions from our Base implementation above, but this is to practise lazy-loading data where we may not want to retrieve all item data upfront, because doing so would slow down our apps.
  3. 3.
    Update our frontend code such that when a user clicks an item's button, retrieve and render the item's description using an AJAX request.

More Comfortable

  1. 1.
    Create database migrations, models, and seeds so that items have categories, where each item belongs to 1 category and each category has many items. Run the migrations and seeds.
  2. 2.
    Update the root route and page so that clicking the button renders a list of category buttons (1 button per category) instead of items.
  3. 3.
    Create a server route /categories/:category_id/items that returns all items for a given category. When a user clicks on a category button, make a request to the relevant route and render a list of items that belongs to that category.