Working with application/json content type in Deno

Introduction

The HTTP request & response bodies could be in a variety of formats like binary, text, JSON, multipart form data, urlencoded, etc. Undoubtedly, the most popular content type is application/json (or simply JSON). JSON (JavaScript Object Notation) is a language-independent data format. It was derived from JavaScript, but many modern programming languages come with built-in libraries to generate and parse JSON-format data. This has been the de facto standard for information exchange in most of the API calls. Barring certain special cases, like file uploads & HTML form submissions, the default data type would likely be JSON.

In this brief article, we’ll see how to work with JSON in two situations:

• Setting: How to set JSON into Request & Response objects
• Getting: How to retrieve JSON from Request & Response objects

Setting

The setting of JSON happens in two use-cases:

• Setting in Request: A fetch API call with request body containing JSON encoded body (for example, a POST request with a body)
• Setting in Response: A server responding with a response body containing JSON encoded body

The usage is the same whether it’s Request or Response object. This makes it very easy to write code, whether for client or for server.

Even though JSON is a very popular data format, the web standard body format doesn’t support it directly (not for setting atleast). In other words, there is no way to give a JavaScript object directly to a Request/Response object. The supported body formats are:

Blob | BufferSource | FormData | URLSearchParams | ReadableStream<Uint8Array> | string

Due to this limitation, setting of JSON requires some work on the user. The work involves preparing the body & setting the content-type header. If not set explicitly, the content-type header would default to text/plain.

To set a JSON body, there are two steps:

• The JavaScript object needs to be stringified. Once a string is ready, it can be given to Request/Response object.
• Set content-type header to application/json

Here is an example of sending JSON in a fetch Request:

const body={
    a: 'b',
    c: 10
};
const res=await fetch('http://localhost:5000', {
    method: 'POST', 
    body: JSON.stringify(body), 
    headers: {
        'content-type': 'application/json'
    }
});
//Request headers:
content-length: 16
content-type: application/json
//Request body:
{"a":"b","c":10}

Here is an example of setting JSON in HTTP response:

const listener = Deno.listen({ port: 5000 });
for await(const conn of listener) {
    for await(const req of Deno.serveHttp(conn)) {
        const body={
            a: 'b',
            c: 10
        };
        req.respondWith(new Response(JSON.stringify(body), {
            headers: {
                'content-type': 'application/json'
            }
        }));
    }
}
//Response headers:
content-length: 16
content-type: application/json
//Response body:
{"a":"b","c":10}

Getting

The getting of JSON also happens in two use-cases:

• Getting from Response: A fetch API response containing JSON body
• Getting from Request: A server receiving an HTTP request containing JSON body

Like setting, the usage of getting is the same whether it’s Request or Response object. Unlike setting, getting is as easy as calling a function.

To get a JavaScript object from the received body, the function json() need to be used. This function is present in both Request & Response objects. This function does a JSON parsing of the request body and returns the JavaScript object.

Here is an example of getting a JavaScript object from a JSON encoded fetch response:

const res=await fetch('http://localhost:5000');
const f=await res.json();
//Response headers:
content-length: 16
content-type: application/json
//Response body: 
//f:
{ a: "b", c: 10 }

Here is an example of getting a JavaScript object from JSON encoded HTTP request body:

const listener = Deno.listen({ port: 5000 });
for await(const conn of listener) {
    for await(const req of Deno.serveHttp(conn)) {
        const f=await req.request.json();
        req.respondWith(new Response());
    }
}
//curl command
curl http://localhost:5000 -d '{"a": "b", "c": 10}' -H 'content-type: application/json'
//Request headers:
content-Length: 19
content-type: application/json
//Request body:
//f:
{ a: "b", c: 10 }