Error in Aurelia Template binding

Question

I think I might have a config issue. I am getting an error when looping over an array of objects. Here is the error. The array of objects are being loaded into the view and they look correct. Its just the "repeat.for" that blows up.

Unhandled promise rejection Error: Incorrect syntax for "for". The form is: "$local of $items" or "[$key, $value] of $items".
at SyntaxInterpreter.for (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:142:13)
at SyntaxInterpreter.interpret (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:27:34)
at TemplatingBindingLanguage.createAttributeInstruction (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:267:46)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1442:41)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1331:23)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1353:33)
at ViewCompiler.compile (http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1314:12)
at http://localhost:8080/jspm_packages/github/aurelia/[email protected]/index.js:1583:49
at run (http://localhost:8080/jspm_packages/npm/[email protected]/modules/es6.promise.js:91:43)
at http://localhost:8080/jspm_packages/npm/[email protected]/modules/es6.promise.js:105:11
at module.exports (http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.invoke.js:6:25)
at queue.(anonymous function) (http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.task.js:40:9)
at Number.run (http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.task.js:27:7)
at listner (http://localhost:8080/jspm_packages/npm/[email protected]/modules/$.task.js:31:9)

View

<table class="table">
  <tr>
    <th>Id</th>
    <th>Uploaded Date</th>
    <th>Bathrooms</th>
    <th>Bedrooms</th>
  </tr>
  <tr repeat.for="advert in adverts">
    <td>${advert.Id}</td>
    <td>${advert.DateAdded}</td>
    <td>${advert.Bathrooms}</td>
    <td>${advert.Bedrooms}</td>
  </tr>
</table>

ViewModel

import {HttpClient} from 'aurelia-http-client';

export class App {
  constructor() {
  this.http = new HttpClient();
  this.adverts = [];
 }
 activate() {
  return this.http.get('http://localhost/BackEnd/api/adverts')
    .then(response => {
      this.adverts = response.content;
      console.log(this.adverts);
    });
  }
}

Answer 1

repeat.for="advert in adverts" needs to be repeat.for="advert of adverts"