> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/arrays.md).

# Arrays

In addition to single objects, web components can accept object arrays.

In the example below, `my-component` has an object array property called `items`.  The component's template iterates over the array showing an `item`'s name property in a `label` and then puts its `price` into an `input` text box using the observable binding `wr-value`.  Any changes to an item's price value will be reflected in the source array set into the component's `items` property.

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      items: true
    }
  }
  static get templateUrl() {
    return './my-component.html';
  }
      
}
```

```html
<!-- my-component.html -->
<ul>
  <li wr-each-item="items">
    <label><{item.name}<label><input wr-value="item.price">
  </li>
<ul>
```

## Array Interpolation References

In addition to iterating over an array of objects, an individual object can be referenced directly in a template using the index number of the object in the array.

In the example below, the value of the `name` property on the first item (0 index) in the `items` array is put into the `div` element.

```html
<!-- my-component.html -->
<div>{items[0].name}</div>
```

This can also be used with an observable attribute binding to update the property on the source array of objects.

```html
<!-- my-component.html -->
<input wr-value="items[0].name">
```