# AUR0777

## Error Message

`AUR0777: Unsupported: [repeat] cannot iterate over <value>`

Where `<value>` is the string representation of the non-iterable value provided to `repeat.for`.

## Description

This error occurs when the expression result provided to a `repeat.for` attribute (the part after `of`) is not a value that the repeater knows how to iterate over.

## Cause

The `repeat.for` attribute expects the value bound after the `of` keyword to be one of the following:

1. **An iterable object:** Such as an Array, `Map`, `Set`, `string`, or other object implementing the iterable protocol (`[Symbol.iterator]`)
2. **A number:** To repeat the template a fixed number of times.
3. `null` or `undefined`: Which results in the repeater rendering nothing.

This error is thrown by the `handleCollectionChange` method within the `Repeat` controller when it receives a value of any other type (e.g., a plain object `{ }`, a boolean `true`/`false`, a function, a Symbol) because it cannot determine how to iterate over such values to generate repeated elements.

## Solution

Ensure that the value you provide to `repeat.for="... of value"` is either an Array, Map, Set, string, a number, `null`, or `undefined`.

* If you have a plain object and want to iterate over its keys or entries, convert it to an iterable first (e.g., using `Object.keys(myObject)`, `Object.values(myObject)`, or `Object.entries(myObject)`).
* If you have a different data type, check your view model logic to ensure the correct variable holding an iterable or number is being bound.

## Example

```html
<!-- Assume 'data' is an object like { a: 1, b: 2 } -->
<!-- Incorrect: Cannot iterate directly over a plain object -->
<div repeat.for="prop of data">${prop}</div>

<!-- Correct: Iterate over the object's keys -->
<div repeat.for="key of Object.keys(data)">${key}: ${data[key]}</div>

<!-- Correct: Iterate over the object's entries -->
<div repeat.for="[key, value] of Object.entries(data)">${key}: ${value}</div>

<!-- Assume 'count' is a number -->
<!-- Correct: Iterate a fixed number of times -->
<div repeat.for="i of count">Item ${i + 1}</div>

<!-- Assume 'items' is an array -->
<!-- Correct: Iterate over an array -->
<div repeat.for="item of items">${item.name}</div>

<!-- Assume 'isValid' is a boolean -->
<!-- Incorrect: Cannot iterate over a boolean -->
<div repeat.for="val of isValid">...</div>
```

```typescript
// View Model Example
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  items = ['Apple', 'Banana', 'Cherry'];
  count = 3;
  data = { id: 1, name: 'Test Object' };
  isValid = true;

  // Methods to get iterables from the object
  Object = Object; // Make Object static methods accessible in the template
}
```

## Debugging Tips

* Inspect the value bound to the `repeat.for` expression in your view model using `console.log` or a debugger.
* Verify the type of the value. Is it an Array, Set, Map, string, or number?
* If it's an object, use `Object.keys`, `Object.values`, or `Object.entries` in the binding expression to make it iterable.
* Ensure the correct variable is being used in the `repeat.for` binding.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0777.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.