# 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.