[SalesForce] Uncaught (in promise) TypeError: t[Ln] is not a function

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"]]

Best Answer

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>
Related Topic