JSON Syntax

JSON (JavaScript Object Notation), is a standard for representing structured data based on JavaScript's object syntax. It is commonly used to transmit data in web apps via HTTP. For example, the HTTP fetch() requests we have been using in this course have been returning Jello projects, users, and issues as JSON.

JSON supports the following primitive data types:

Strings, e.g. "Hello, World!"
Numbers, e.g. 42 or 3.14
Booleans, e.g. true
Null, e.g. null

And the following collection types:

Arrays, e.g. [1, 2, 3]
Object literals, e.g. {"key": "value"}

Because we already understand what JavaScript objects look like, understanding JSON is easy! JSON is just a stringified JavaScript object. The following is valid JSON data:

{
    "movies": [
        {
            "id": 1,
            "genre": "Action",
            "title": "Iron Man",
            "director": "Jon Favreau"
        },
        {
            "id": 2,
            "genre": "Action",
            "title": "The Avengers",
            "director": "Joss Whedon"
        }
    ]
}

Parsing HTTP Responses As JSON

JavaScript provides us with some easy tools to help us work with JSON. After making an HTTP request with the fetch() API, we get a Response object. That response object offers us some methods that help us interact with the response. One such method is the .json() method. The .json() method takes the response stream returned by a fetch request and returns a promise that resolves into a JavaScript object parsed from the JSON body of the HTTP response!

const resp = await fetch(...)
const javascriptObjectResponse = await resp.json()

What type is .json()?

The .json() method returns a promise that resolves to an object typed as any. This means TypeScript doesn’t enforce any specific shape or structure for the returned data, leaving it up to you to handle the type appropriately.

If you know the shape of the data, you can explicitly set the return type — like we've done so far — or you can cast it to a specific type:

interface Project {
  id: string;
  title: string;
}

const response = await fetch("https://api.example.com/projects");
const projects = await response.json() as Project[];

Assignment

Our getProjects function is almost done, we just need to parse the response data as JSON and return it.

The result of this method is NOT JSON. It is the result of taking JSON data from the HTTP response body and parsing that input into a JavaScript Object.

import { Project } from "./types";

async function getProjects(): Promise<Project[]> {

const url = "https://api.boot.dev/v1/courses_rest_api/learn-http/projects";

const response = await fetch(url, {

method: "GET",

mode: "cors",

headers: {

"X-API-Key": apiKey,

"Content-Type": "application/json",

});

// ?

}

// Don't touch below this line

const apiKey = generateKey();

const projects = await getProjects();

console.log("Got some projects from the server.");

for (const project of projects) {

console.log(`- title: ${project.title}, assignees: ${project.assignees}`);

}

function generateKey(): string {

const characters = "ABCDEF0123456789";

let result = "";

for (let i = 0; i < 16; i++) {

result += characters.charAt(Math.floor(Math.random() * characters.length));

}

return result;

}