Response: json() static method

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).

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await jsonResponse.text();
  log(`body: ${responseText}`);
  jsonResponse.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${jsonResponse.status}`);
  log(`statusText: ${jsonResponse.statusText}`);
  log(`type: ${jsonResponse.type}`);
  log(`url: ${jsonResponse.url}`);
  log(`ok: ${jsonResponse.ok}`);
  log(`redirected: ${jsonResponse.redirected}`);
  log(`bodyUsed: ${jsonResponse.bodyUsed}`);
}

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.

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await jsonResponse.text();
  log(`body: ${responseText}`);
  jsonResponse.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${jsonResponse.status}`);
  log(`statusText: ${jsonResponse.statusText}`);
  log(`type: ${jsonResponse.type}`);
  log(`url: ${jsonResponse.url}`);
  log(`ok: ${jsonResponse.ok}`);
  log(`redirected: ${jsonResponse.redirected}`);
  log(`bodyUsed: ${jsonResponse.bodyUsed}`);
}

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