# Data Binding

The [data map](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data#datamap) for Select2 for WireBootstrap is listed below.  The component expects these field names in its `data` configuration.

## Properties

| Name | Description                                                     |
| ---- | --------------------------------------------------------------- |
| id   | The field in the data to be used as the unique id for items     |
| text | The field in the data to be used as the display label for items |

```javascript
const users = [
    { id: "bsimmons", text: "Ben Simmons" },
    { id: "jembiid", text: "Joel Embiid" }
]

const select2 = new wire.select2().render("#select", {
    data: users
});
```

## Datamap

Use the `datamap` configuration property to bind a data structure to the component that does not have the same field names.

```javascript
const users = [
    { user: "bsimmons", name: "Ben Simmons" },
    { user: "jembiid", name: "Joel Embiid" },
]

const select2 = new wire.select2().render("#select", {
    data: users,
    datamap: { id: "user", text: "name" }
});
```