The json() static method of the Response interface returns a Response that contains the provided JSON data as body, and a Content-Type header which is set to application/json. The response status, status message, and additional headers can also be set.

The method makes it easy to create Response objects for returning JSON encoded data. Service workers, for example, intercept fetch requests made by a browser, and might use json() to construct a Response from cached JSON data to return to the main thread. The json() method can also be used in server code to return JSON data for single page applications, and any other applications where a JSON response is expected.

data

The JSON data to be used as the response body.

options Optional

An options object containing settings for the response, including the status code, status text, and headers. This is the same as the options parameter of the Response() constructor.

status

The status code for the response, such as 200.

statusText

The status message associated with the status code. For a status of 200 this might be OK.

headers

Any headers you want to add to your response, contained within a Headers object or object literal of String key/value pairs (see HTTP headers for a reference).

A Response object.

TypeError

Thrown if data cannot be converted to a JSON string. This might happen if the data is a JavaScript object that has method, or that has a circular reference, or if the passed object is undefined.

This live example shows how you can create a JSON response object, and logs the newly created object for inspection (the logging code is hidden as it is not relevant).

The code below creates a Response object with JSON body { my: "data" } and header set to application/json.

const jsonResponse = Response.json({ my: "data" });
logResponse(jsonResponse);

The object has the following properties. Note the body and header are set as expected, and that the default status is set to 200.

This example shows how you can create a JSON response object with status and statusText options.

The code below creates a Response object with JSON body { some: "data", more: "information" } and header set to application/json. It also sets the status to 307 and sets the appropriate status text ("Temporary Redirect").

const jsonResponse = Response.json(
  { some: "data", more: "information" },
  { status: 307, statusText: "Temporary Redirect" },
);
logResponse(jsonResponse);

The object has the following properties, which are set as expected. Note that the ok property of the response changed to false as the status value is not in the range of 200 to 299.

• Service Worker API