---
name: "up.data"
area: "API"
kind: "JavaScript function"
parent: "up.script module"
url: "https://unpoly.com/api/up.data"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.script module](https://unpoly.com/api/up.script.md)</nav>

# up.data(element)

Returns the [data](https://unpoly.com/learn/data.md) attached to the given element.

If the element has no attached data, an empty object is returned.

Multiple `up.data()` calls for the same element always return the same object reference.

<nav aria-label="Guides">

- [Learn: Attaching data to elements](https://unpoly.com/learn/data.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Use with `[up-data]`](#use-with-up-data)
- [Use with data attributes](#use-with-data-attributes)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Use with `[up-data]` {#use-with-up-data}

You have an element with JSON data serialized into an [`[up-data]`](https://unpoly.com/api/up-data.md) attribute:

```html
<span class="person" up-data="{ age: 18, name: 'Bob' }">Bob</span>
```

Calling `up.data()` will deserialize the JSON string into a JavaScript object:

```js
up.data('.person') // returns { age: 18, name: 'Bob' }
```

## Use with data attributes {#use-with-data-attributes}

You may also use standard [`[data-*]` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to attach data to an element.

```html
<span class='person' data-first-name='Alice' data-last-name='Anderson'>Alice</span>
```

The object returned by `up.data()` will contain all data attributes with camelCased keys:

```js
up.data('.person') // returns { firstName: 'Alice', lastName: 'Anderson' }
```

You may use both [`[up-data]`](https://unpoly.com/api/up-data.md) and `[data-*]` attributes on the same element. The object returned by `up.data()` will contain values from both.

---

## Parameters {#parameters}

### element {#element}

(required)

The element for which to return data.

Type: string | [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | [jQuery](https://learn.jquery.com/using-jquery-core/jquery-object/)

---

## Return value {#return-value}

The [data](https://unpoly.com/learn/data.md) attached to the element.

Returns an empty object if the element has no attached data.

Multiple `up.data()` calls for the same element always return the same object reference.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)