---
name: "[up-data]"
area: "API"
kind: "HTML attribute"
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]

Attaches structured data to an element to be consumed by a compiler or event handler.

If an element with an `[up-data]` attribute enters the DOM, Unpoly will parse the JSON and pass the resulting object to any matching [`up.compiler()`](https://unpoly.com/api/up.compiler.md) functions and [`up.on()`](https://unpoly.com/api/up.on.md) callbacks.

To programmatically parse an `[up-data]` attribute into an object, use [`up.data(element)`](https://unpoly.com/api/up.data.md).

<nav aria-label="Guides">

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

</nav>

## Example {#example}

A container for a [Google Map](https://developers.google.com/maps/documentation/javascript/tutorial) might attach the location and names of its marker pins:

```html
<div class="google-map" up-data="{ pins: [
  { lat: 48.36, lng: 10.99, title: 'Friedberg' },
  { lat: 48.75, lng: 11.45, title: 'Ingolstadt' }
] }"></div>
```

The attribute value will be parsed as [relaxed JSON](https://unpoly.com/api/relaxed-json.md). The parsed object is passed to your compiler as a second argument:

```js
up.compiler('.google-map', function(element, data) {
  let map = new google.maps.Map(element)
  for (let pin of data.pins) {
    let position = new google.maps.LatLng(pin.lat, pin.lng)
    new google.maps.Marker({ position, map, title: pin.title })
  }
})
```

Similarly, when an event is triggered on an element annotated with `[up-data]`, the parsed object will be passed to any matching [`up.on()`](https://unpoly.com/api/up.on.md) handlers:

```js
up.on('click', '.google-map', function(event, element, data) {
  console.log("There are %d pins on the clicked map", data.pins.length)
})
```

You may also parse the data object programmatically using the [`up.data()`](https://unpoly.com/api/up.data.md) function:

```js
let data = up.data('.google-map')
data.pins[0].lat // result: 48.36
data.pins[0].lng // result: 10.99
data.pins[0].title // result: 'Friedberg'
```

---

## Modifying attributes {#attributes}

### up-data {#up-data}

(required)

A data object serialized as [relaxed JSON](https://unpoly.com/api/relaxed-json.md).