1

My second for:each loop fails with this TypeError:

Uncaught (in promise) TypeError: t[Ln] is not a function
at i (aura_prod.js:4)
at eval (mlm_lwc_advSearchResults.js:4)
at i (aura_prod.js:4)
at o (mlm_lwc_advSearchResults.js:4)
at aura_prod.js:4
at Ne.observe (aura_prod.js:4)
at ao (aura_prod.js:4)
at Ir (aura_prod.js:4)
at fo (aura_prod.js:4)
at aura_prod.js:4

The code looks like this:

<template for:each={tableData} for:item="row">
    <tr key={row.Id} class="slds-hint-parent">                          
        <template for:each={row} for:item="item">
            <th key={item.Id} scope="row">
                <div key={item.Id} class="slds-truncate slds-align_absolute-center">
                    <template if:true={item}>
                        <c-another-component value={item}></c-another-component>
                    </template>
                </div>
            </th>
        </template>
    </tr>
</template>

the tableData variable looks like this:

[["test","test","test","test","test","test","test","test","test","test","test","test","test","test","test","test"],["test2","test2","test2","test2","test2","test2","test2","test2","test2","test2","test2","test2","test2","test2","test2","test2"]]
1
  • You should enable debug mode for lightning components if you can, it'll give you more useful error messages, since all the JS won't be minified – Ben Nguyen Mar 7 '20 at 0:07
1

You specified things like Id, so the template is expecting such an attribute to exist, but does't. Here's a minimally modified version (kept short because it's a lot of typing):

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track tableData = [
        { Id: "0", data: [ { Id: "1", value: "2" }, { Id: "2", value: "4" }, { Id: "3", value: "6" }, { Id: "4", value: "8" }]},
        { Id: "1", data: [ { Id: "1", value: "2" }, { Id: "2", value: "4" }, { Id: "3", value: "6" }, { Id: "4", value: "8" }]},
    ]
}

You'll need to adjust the template to match, as well.


<template for:each={tableData} for:item="row">
    <tr key={row.Id} class="slds-hint-parent">                          
        <template for:each={row.data} for:item="item">
            <th key={item.Id} scope="row">
                <div key={item.Id} class="slds-truncate slds-align_absolute-center">
                    <template if:true={item.value}>
                        <c-another-component value={item.value}></c-another-component>
                    </template>
                </div>
            </th>
        </template>
    </tr>
</template>
3
  • I tried as you said, but i still receiving that error; i noticed that the error is shown also if I run the same code with the content of the second foreach commented. If I totally remove the second foreach there's no error.. Maybe is the "row" attribute used in the second foreach that triggers the error? thank you – Teemo_smr Mar 6 '20 at 15:45
  • @Simone You'd use row.data instead of just row; that's definitely the source of the error. – sfdcfox Mar 6 '20 at 15:52
  • now the error is not shown, but I tried to print both row and row.data; row contains the object while row.data is empty .. thank you very much for helping me – Teemo_smr Mar 6 '20 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.