recursal/MDN huggingface dataset:
Request: json() method
======================

 The **`json()`** method of the `Request` interface
 reads the request body and returns it as a promise that resolves with the result of parsing the body text as `JSON`.

Note that despite the method being named `json()`, the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object.

Syntax
------


```js
json()
```

### Parameters

None.

### Return value

 A `Promise` that resolves to a JavaScript object. This object could be
 anything that can be represented by JSON — an object, an array, a string, a number…

Examples
--------


```js
const obj = { hello: "world" };

const request = new Request("/myEndpoint", {
  method: "POST",
  body: JSON.stringify(obj),
});

request.json().then((data) => {
  // do something with the data sent in the request
});
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-json① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Response.json()`
Request: referrerPolicy property
================================

 The **`referrerPolicy`** read-only property of the
 `Request` interface returns the referrer policy, which governs what
 referrer information, sent in the `Referer` header, should be included
 with the request.

Value
-----

 A string representing the request's `referrerPolicy`. For
 more information and possible values, see the `Referrer-Policy` HTTP
 header page.

Examples
--------

 In the following snippet, we create a new request using the
 `Request()` constructor (for an image file in the same directory as
 the script), then save the request referrer policy in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myReferrer = myRequest.referrerPolicy; // returns "" by default
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-referrerpolicy② |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: formData() method
==========================

 The **`formData()`** method of the `Request` interface
 reads the request body and returns it as a promise that resolves with a `FormData` object.

Syntax
------


```js
formData()
```

### Parameters

None.

### Return value

A `Promise` that resolves with a `FormData` object.

Examples
--------


```js
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append("username", "abc123");
formData.append("avatar", fileField.files[0]);

const request = new Request("/myEndpoint", {
  method: "POST",
  body: formData,
});

request.formData().then((data) => {
  // do something with the formdata sent in the request
});
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-formdata① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Response.formData()`
Request: body property
======================

 The read-only **`body`** property of the `Request`
 interface contains a `ReadableStream` with the body contents
 that have been added to the request. Note that a request using the
 `GET` or `HEAD` method cannot have a body
 and `null` is returned in these cases.

Value
-----

A `ReadableStream` or `null`.

Examples
--------


```js
const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.body; // ReadableStream
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-body① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Request.bodyUsed`
Request: bodyUsed property
==========================

 The read-only **`bodyUsed`** property of the
 `Request` interface is a boolean value that indicates
 whether the request body has been read yet.

Value
-----

A boolean value.

Examples
--------


```js
const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.bodyUsed; // false

request.text().then((bodyAsText) => {
  console.log(request.bodyUsed); // true
});
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-bodyused① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Request.body`
Request: method property
========================

 The **`method`** read-only property of the
 `Request` interface contains the request's method (`GET`,
 `POST`, etc.)

Value
-----

A `String` indicating the method of the request.

Examples
--------

 In the following snippet, we create a new request using the
 `Request()` constructor (for an image file in the same directory as
 the script), then save the method of the request in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myMethod = myRequest.method; // GET
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-method② |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: credentials property
=============================

The **`credentials`** read-only property of the `Request` interface indicates whether the user agent should send or receive cookies from the other domain in the case of cross-origin requests.

Value
-----

A `RequestCredentials` dictionary value indicating whether the user agent should send or receive cookies from the other domain in the case of cross-origin requests. Possible values are:

`omit`

Never send or receive cookies.

`same-origin`

Send user credentials (cookies, basic http auth, etc..) if the URL is on the same origin as the calling script. **This is the default value.**

`include`

Always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.

This is similar to XHR's `withCredentials` flag, but with three available values instead of two.

Examples
--------

In the following snippet, we create a new request using the `Request()` constructor (for an image file in the same directory as the script), then save the request credentials in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myCred = myRequest.credentials; // returns "same-origin" by default
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-credentials② |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
MediaStreamEvent: stream property
=================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The read-only property **`MediaStreamEvent.stream`** returns
 the `MediaStream` associated with the event.

Syntax
------


```js
event.stream
```

Example
-------


```js
pc.onaddstream = (ev) => {
  alert(`A stream (id: '${ev.stream.id}') has been added to this connection.`);
};
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `addstream`, `removestream`
* `RTCPeerConnection`
MediaStreamEvent: MediaStreamEvent() constructor
================================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`MediaStreamEvent()`** constructor creates a new `MediaStreamEvent` object.

Syntax
------


```js
 new MediaStreamEvent(type, options)
```

### Values

`type`

A string with the name of the event, like `addstream` or `removestream`.

`options`

An object that, in addition of the properties defined in `Event()`, can have the following properties:

`stream`

A `MediaStream` representing the stream being concerned by the event.


### Return value

A new `MediaStreamEvent` object.

Example
-------


```js
// s is a MediaStream
const event = new MediaStreamEvent("addstream", { stream: s });
```

Specifications
--------------

*This feature is no more part of any specification.*

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebRTC
SVGImageElement: y property
===========================

 The **`y`** read-only property of the
 `SVGImageElement` interface returns an `SVGAnimatedLength`
 corresponding to the `y` attribute of the given `<image>`
 element.

Value
-----

An `SVGAnimatedLength`.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGImageElement\_\_y |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGImageElement: width property
===============================

 The **`width`** read-only property of the
 `SVGImageElement` interface returns an `SVGAnimatedLength`
 corresponding to the `width` attribute of the given `<image>`
 element.

Value
-----

An `SVGAnimatedLength`.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGImageElement\_\_width |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGImageElement: x property
===========================

 The **`x`** read-only property of the
 `SVGImageElement` interface returns an `SVGAnimatedLength`
 corresponding to the `x` attribute of the given `<image>`
 element.

Value
-----

An `SVGAnimatedLength`.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGImageElement\_\_x |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGImageElement: height property
================================

 The **`height`** read-only property of the
 `SVGImageElement` interface returns an `SVGAnimatedLength`
 corresponding to the `height` attribute of the given
 `<image>` element.

Value
-----

An `SVGAnimatedLength`.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGImageElement\_\_height |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGImageElement: decode() method
================================

 The **`decode()`** method of the
 `SVGImageElement` interface initiates asynchronous decoding of an image,
 returning a `Promise` that resolves once the image is decoded and it is safe to append
 it to the DOM.

Syntax
------


```js
decode()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with `undefined` once the image data is ready to be used, for example by appending it to the DOM, replacing an existing image, and so forth.

### Exceptions

None.

Examples
--------

In the below example, you'll likely get an empty image shown on the page as the image is downloaded:


```js
const SVG\_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

const img = document.createElementNS(SVG\_NS, "image");
img.src = "img/logo.svg";
svg.appendChild(img);
```


Using `decode()` will delay inserting the image into the DOM until it is fully downloaded and decoded, thereby avoiding the empty image problem:


```js
const SVG\_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

async function getImage() {
  const img = document.createElementNS(SVG\_NS, "image");
  img.src = "img/logo.svg";
  await img.decode();
  svg.appendChild(img);
  const text = document.createElementNS(SVG\_NS, "text");
  text.textContent = "Image is fully loaded!";
  svg.appendChild(text);
}
```


This is particularly useful if you're dynamically swapping an existing image for a new one, and also prevents unrelated paints outside of this code from being held up while the image is decoding.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-img-decode-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLImageElement.decode()`: The same thing, but for HTML `<img>` elements
* What does the image decoding attribute actually do? on tunetheweb.com (2023)
SVGImageElement: preserveAspectRatio property
=============================================

 The **`preserveAspectRatio`** read-only
 property of the `SVGImageElement` interface returns an
 `SVGAnimatedPreserveAspectRatio` corresponding to the
 `preserveAspectRatio` attribute of the given `<image>`
 element.

Value
-----

An `SVGAnimatedPreserveAspectRatio`.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PreserveAspectRatioAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LargestContentfulPaint: renderTime property
===========================================

The **`renderTime`** read-only property of the `LargestContentfulPaint` interface represents the time that the element was rendered to the screen.

Value
-----

The `renderTime` property can have the following values:

* A `timestamp` representing the time in milliseconds that the element was rendered to the screen.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Logging the renderTime of the largest contentful paint

This example uses a `PerformanceObserver` notifying of new `largest-contentful-paint` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.renderTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });
```

### Cross-origin image render time

For security reasons, the value of the `renderTime` property is `0` if the resource is a cross-origin request. Instead the `loadTime` is exposed. To expose cross-origin render time information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see `renderTime`, the cross-origin resource should send:


```http
Timing-Allow-Origin: https://developer.mozilla.org
```


Alternatively, you can use `startTime` which returns the value of the entry's `renderTime` if it is not `0`, and otherwise the value of this entry's `loadTime`. However, it is recommended to set the `Timing-Allow-Origin` header so that the metrics will be more accurate.

If you use `startTime`, you can flag any inaccuracies by checking if `renderTime` was used:


```js
const isAccurateLCP = entry.renderTime ? true : false;
```

Specifications
--------------

| Specification |
| --- |
| Largest Contentful Paint # dom-largestcontentfulpaint-rendertime |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LargestContentfulPaint: size property
=====================================

The **`size`** read-only property of the `LargestContentfulPaint` interface returns the intrinsic size of the element that is the largest contentful paint.

The `size` of the element is the `width` times `height` of the `rectangle` that this element creates on the screen.

Value
-----

An integer representing the width times height of the element.

Examples
--------

### Logging the size of the largest contentful paint element

This example uses a `PerformanceObserver` notifying of new `largest-contentful-paint` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.size);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });
```

Specifications
--------------

| Specification |
| --- |
| Largest Contentful Paint # dom-largestcontentfulpaint-size |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LargestContentfulPaint: id property
===================================

The **`id`** read-only property of the `LargestContentfulPaint` interface returns the ID of the element that is the largest contentful paint.

Value
-----

A string containing the ID of the element, or the empty string if there is no such ID.

Examples
--------

### Logging the largest contentful paint element ID

This example uses a `PerformanceObserver` notifying of new `largest-contentful-paint` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.id);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });
```

Specifications
--------------

| Specification |
| --- |
| Largest Contentful Paint # dom-largestcontentfulpaint-id |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LargestContentfulPaint: loadTime property
=========================================

The **`loadTime`** read-only property of the `LargestContentfulPaint` interface returns the time that the element was loaded.

Value
-----

A `timestamp` representing the time in milliseconds that the element was loaded.

Examples
--------

### Logging the loadTime of the largest contentful paint

This example uses a `PerformanceObserver` notifying of new `largest-contentful-paint` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.loadTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });
```

Specifications
--------------

| Specification |
| --- |
| Largest Contentful Paint # dom-largestcontentfulpaint-loadtime |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LargestContentfulPaint: toJSON() method
=======================================

The **`toJSON()`** method of the `LargestContentfulPaint` interface is a serializer; it returns a JSON representation of the `LargestContentfulPaint` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A `JSON` object that is the serialization of the `LargestContentfulPaint` object.

The JSON doesn't contain the `element` property because it is of type `Element`, which doesn't provide a `toJSON()` operation.

Examples
--------

### Using the toJSON method

In this example, calling `entry.toJSON()` returns a JSON representation of the `LargestContentfulPaint` object.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "largest-contentful-paint", buffered: true });
```


This would log a JSON object like so:


```json
{
  "name": "",
  "entryType": "largest-contentful-paint",
  "startTime": 468.2,
  "duration": 0,
  "size": 19824,
  "renderTime": 468.2,
  "loadTime": 0,
  "id": "",
  "url": ""
}
```


To get a JSON string, you can use `JSON.stringify(entry)` directly; it will call `toJSON()` automatically.

Specifications
--------------

| Specification |
| --- |
| Largest Contentful Paint # dom-largestcontentfulpaint-tojson |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `JSON`
LargestContentfulPaint: url property
====================================

The **`url`** read-only property of the `LargestContentfulPaint` interface returns the request URL of the element, if the element is an image.

Value
-----

A string containing a URL.

Examples
--------

### Logging the url of the largest contentful paint

This example uses a `PerformanceObserver` notifying of new `largest-contentful-paint` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.url);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });
```

Specifications
--------------

| Specification |
| --- |
| Largest Contentful Paint # dom-largestcontentfulpaint-url |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.