Getting Error While Iterating on JSON Array using for:each in LWC

Question

We have data as below in track variable rowColorRules :

[{
    "color": "#ED0E0E",
    "criterias": [{
        "field": "sdd",
        "operator": "==",
        "value": "asdads"
    },{
        "field": "sdd",
        "operator": "==",
        "value": "asdads"
    }],
    "upArrow": false,
    "downArrow": false
}]

So, here rowColorRules is array and criterias within each rowColorRules is also array and we are trying to iterate nested for:each withing main for:each But in for:each of criterias we are getting below errors:

HTML code is as below:

<template for:each={rowColorRules} for:item="rule" for:index="index">
    <!-- some html -->
    <template for:each={rule.criterias} for:item="criteria">
        <!-- some html -->
    </template>
</template>

If i will remove for loop of criterias then it will start working perfectly.

Answer 1

Just tried from my end in LWC playground. I am not getting any error

@track test = [{
    "color": "#ED0E0E",
    "criterias": [{
        "field": "sdd",
        "operator": "==",
        "value": "asdads"
    },{
        "field": "sdd",
        "operator": "==",
        "value": "asdads"
    }],
    "upArrow": false,
    "downArrow": false
}]

    <template>
        <template for:each={test} for:item="rule" for:index="index"> 
            <template for:each={rule.criterias} for:item="criteria">
              {criteria.operator}
            </template>
        </template>
    </template>