Day 14: Controllers and JSON Endpoints

Reminders for Tony

1. Put on mic
2. Open Zoom chat
3. Record! Anyone else?

Topics Covered

1. Introduction to JSON and JSON APIs
   • MDN: Working with JSON
   • JSON Placeholder
2. Asynchronous Javascript basics
   • Graceful asynchronous programming with Promises
   • response.json Documentation
3. Consuming JSON APIs with fetch()
   • Using fetch()
   • Express Tutorial Part 4: Routes and controllers

Goal for the day

By the end of the day, you’ll have migrated a frontend javascript array to a Node custom model on the backend.

• Today’s finished code

Topic 1: JSON APIs

JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You’ll come across it quite often, so in this article we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.

Activity objectives: Postman setup

1. Download and install Postman (Getting started)
2. Using Postman, explore this list of open JSON APIs. Are there any that could be used in your group project?
3. Try submitting a POST request (with data) to the JSON placeholder /posts endpoint.

Topic 2: Asynchronous Javascript basics

Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after a previous action has completed, or respond to its failure. This is useful for setting up a sequence of async operations to work correctly. This article shows you how promises work, how you’ll see them in use with web APIs, and how to write your own.

Activity objectives: Create a GET /api/destinations endpoint

1. Make sure you have a valid Destinations module included in your project using require().
2. Using the response.json method, create a GET /api/destinations endpoint in Express that returns the correct Destinations items for your frontend loop to work.

Mid-day Huddle

• who needs help?
• any pivots?
• any show-and-tell?

[lunch]

Topic 3: Consuming JSON APIs with fetch()

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

Activity objectives: Gallery refactor

It’s time to refactor your Destinations gallery loop.

1. Instead of feeding your loop with a local data model (i.e. your image array), set up an asynchronous fetch() call that requests the data from your server instead.
2. What other JSON API endpoints might come in handy for your project?

Homework

It’s time to try deploy your Travel Experts website on Heroku. You can work on this tonight and tomorrow. We will revisit this on Day 16.

Follow the instructions below to refactor your project to be compatible with the Heroku system.

Getting Started on Heroku with Node.js

Summary

• any trophies?
• prep for tomorrow?
• applause