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

<!-- 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>

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