CODEWITHSUNDEEP
aurelia
Greg
Greg

Reputation: 2690

Error in Aurelia Template binding

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);
    });
  }
}

Upvotes: 5

Views: 956

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

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

Upvotes: 15

Related Questions