# Using repeat.for gives an error Parser Error: Unconsumed token in custom element

**URL:** <https://discourse.aurelia.io/t/using-repeat-for-gives-an-error-parser-error-unconsumed-token-in-custom-element/2948>\
**Category:** Help Requests\
**Created:** [September 24, 2019, 12:42am UTC](https://discourse.aurelia.io/t/using-repeat-for-gives-an-error-parser-error-unconsumed-token-in-custom-element/2948 "2019-09-24T00:42:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![si2030](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/si2030/32/275_2.png) [@si2030](https://discourse.aurelia.io/u/si2030)\
**Post date:** [September 24, 2019, 12:42am UTC](https://discourse.aurelia.io/t/using-repeat-for-gives-an-error-parser-error-unconsumed-token-in-custom-element/2948/1 "2019-09-24T00:42:42Z")

</div>

I am trying to iterate over an array of objects where the viewmodel and view are a custom element and I am getting the following error.

> aurelia-binding.js:2857 Uncaught (in promise) Error: Parser Error: Unconsumed token { at column 1 in expression [${model.jobs}]  
> at ParserImplementation.err (aurelia-binding.js:2857)  
> at ParserImplementation.parseBindingBehavior (aurelia-binding.js:2392)  
> at Parser.parse (aurelia-binding.js:2349)  
> at SyntaxInterpreter.\_for [as for] (aurelia-templating-binding.js:611)  
> at SyntaxInterpreter.interpret (aurelia-templating-binding.js:461)  
> at TemplatingBindingLanguage.createAttributeInstruction (aurelia-templating-binding.js:721)  
> at ViewCompiler.\_compileElement (aurelia-templating.js:3015)  
> at ViewCompiler.\_compileNode (aurelia-templating.js:2776)  
> at ViewCompiler.\_compileElement (aurelia-templating.js:3096)  
> at ViewCompiler.\_compileNode (aurelia-templating.js:2776)  
> err @ aurelia-binding.js:2857  
> parseBindingBehavior @ aurelia-binding.js:2392  
> parse @ aurelia-binding.js:2349  
> \_for @ aurelia-templating-binding.js:611  
> interpret @ aurelia-templating-binding.js:461  
> createAttributeInstruction @ aurelia-templating-binding.js:721  
> \_compileElement @ aurelia-templating.js:3015  
> \_compileNode @ aurelia-templating.js:2776  
> \_compileElement @ aurelia-templating.js:3096  
> \_compileNode @ aurelia-templating.js:2776  
> \_compileElement @ aurelia-templating.js:3096  
> \_compileNode @ aurelia-templating.js:2776  
> \_compileElement @ aurelia-templating.js:3096  
> \_compileNode @ aurelia-templating.js:2776  
> \_compileElement @ aurelia-templating.js:3096  
> \_compileNode @ aurelia-templating.js:2776  
> \_compileNode @ aurelia-templating.js:2798  
> compile @ aurelia-templating.js:2745  
> (anonymous) @ aurelia-templating.js:3479  
> Promise.then (async)  
> processChanges @ aurelia-templating-resources.js:161  
> push.aurelia-templating-resources.Compose.bind @ aurelia-templating-resources.js:73  
> bind @ aurelia-templating.js:3720  
> bind @ aurelia-templating.js:1672  
> push…/node\_modules/aurelia-slickgrid/dist/native-modules/services/aureliaUtil.service.js.AureliaUtilService.createAureliaViewModelAddToSlot @ aureliaUtil.service.js:24  
> push…/node\_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.RowDetailViewExtension.renderViewModel @ rowDetailViewExtension.js:351  
> (anonymous) @ rowDetailViewExtension.js:166  
> Event.notify @ slick.core.js:189  
> (anonymous) @ slick.rowdetailview.js:535  
> Event.notify @ slick.core.js:189  
> push…/node\_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.RowDetailViewExtension.notifyTemplate @ rowDetailViewExtension.js:233  
> (anonymous) @ rowDetailViewExtension.js:271  
> step @ rowDetailViewExtension.js:37  
> (anonymous) @ rowDetailViewExtension.js:18  
> fulfilled @ rowDetailViewExtension.js:9  
> Promise.then (async)  
> step @ rowDetailViewExtension.js:11  
> (anonymous) @ rowDetailViewExtension.js:12  
> push…/node\_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.\_\_awaiter @ rowDetailViewExtension.js:8  
> push…/node\_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.RowDetailViewExtension.onProcessing @ rowDetailViewExtension.js:241  
> gridOptions.rowDetailView.process @ rowDetailViewExtension.js:105  
> expandDetailView @ slick.rowdetailview.js:497  
> handleAccordionShowHide @ slick.rowdetailview.js:549  
> toggleRowSelection @ slick.rowdetailview.js:426  
> handleClick @ slick.rowdetailview.js:245  
> Event.notify @ slick.core.js:189  
> trigger @ slick.grid.js:2527  
> handleClick @ slick.grid.js:4436  
> dispatch @ jquery.js:5237  
> push…/node\_modules/slickgrid/lib/jquery.event.drag-2.3.0.js.$event.dispatch @ jquery.event.drag-2.3.0.js:382  
> elemData.handle @ jquery.js:5044

Here is my template code.

```
			<ul>
				<li repeat.for="job of ${model.jobs}">${job.jobNo}</li>
			</ul>

```

The object is part of a larger model however here is my custom elements viewmodel:

```
import { bindable, autoinject } from "aurelia-framework";
import {
    AureliaGridInstance,
    Column,
    GridOption
} from 'aurelia-slickgrid';

@autoinject
export class ClientIndexDetailViewCustomElement {
    @bindable detailViewRowCount = 7;
    aureliaGrid: AureliaGridInstance;
    gridOptions: GridOption;
    columnDefinitions: Column[];
   

    @bindable() model: {
        id: number;
        clientNo: number;
        company: boolean;
        isWarrantyCompany: boolean;
        CompanyName: string;
        ClientFirstName: string
        ClientLastName: string
        MobilePhone: string
        DateCreated: string
        DeActivated: string
        NumberOfJobs: string
        Active: boolean
        Activity: boolean
        Address: any
        jobs: any[]
    };

    bind(bindingContext, overrideContext) {

        if (bindingContext.model) {
            this.model = bindingContext.model;
            console.log("client-detail-MODEL 1: ", this.model);
        } else if (overrideContext && overrideContext.bindingContext && overrideContext.bindingContext.model) {
            this.model = overrideContext.bindingContext.model;
            console.log("client-detail-MODEL 2: ", this.model);
        } else if (overrideContext && overrideContext.parentOverrideContext && overrideContext.parentOverrideContext.bindingContext && overrideContext.parentOverrideContext.bindingContext.model) {
            this.model = overrideContext.parentOverrideContext.bindingContext.model; {
                console.log("client-detail-MODEL 3: ", this.model);

            }
        }
    }
}

```

I have found that all the other variables are accessible via just putting in say ${model.clientNo} but if I try any form of repeat.for, in this case on jobs I get the above error regarding unconsumed token.

I have been working with a model that has three “jobs”. If I look at this in the console they display as

```
1. jobs: Array(3)

  1. 0: {id: 20, jobNo: 1503, agentJobNo: "27126", jobType: "Dishwasher-Changeover", status: "Job Completed", …}
  2. 1: {id: 21, jobNo: 1502, agentJobNo: "218813", jobType: "Commercial Ref-Install", status: "Job Completed", …}
  3. 2: {id: 22, jobNo: 1501, agentJobNo: "220081", jobType: "Oven-Domestic repair", status: "Job Completed", …}

```

If I place ${model.jobs} in the view by itself I get:

`[object Object],[object Object],[object Object]`

So, given the fact this is a custom element and I have a bound variable how can I use repeat.for to iterate over an array of objects when I am in a custom element?

I found [this](https://github.com/aurelia/templating-resources/issues/114) but it didnt elaborate regarding $parent etc…

---

<div class="post-metadata">

**Author:** ![elmt1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elmt1/32/2687_2.png) [@elmt1](https://discourse.aurelia.io/u/elmt1)\
**Post date:** [September 24, 2019, 2:00am UTC](https://discourse.aurelia.io/t/using-repeat-for-gives-an-error-parser-error-unconsumed-token-in-custom-element/2948/2 "2019-09-24T02:00:40Z")

</div>

Hello @si2030, I would guess that it is complaining about the ${…}, I would expect it to be just repeat.for=“job of model.jobs”

---

<div class="post-metadata">

**Author:** ![si2030](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/si2030/32/275_2.png) [@si2030](https://discourse.aurelia.io/u/si2030)\
**Post date:** [September 30, 2019, 5:50am UTC](https://discourse.aurelia.io/t/using-repeat-for-gives-an-error-parser-error-unconsumed-token-in-custom-element/2948/3 "2019-09-30T05:50:18Z")

</div>

Yep… it was that easy… thanks.