Access value From Nested For Each In LWC

Question

I am trying to get object value dynamically using nested for each loop in HTML. EX: In JS I have record somthing like this :

        this.tempData = [{ 'field1': 'name', 'field2': 'type' }];
        this.fields = ['field1', 'field2'];

In HTML Displaying values:

<template for:each={tempData} for:item="i" for:index="index">
<template for:each={fields} for:item="field" for:index="index1">
     <div  key={field}>
         {i.field} 
     </div>
     
     </template>
     </template>

but not able to get the record value ,however when I am using record statically like :

{i.field1}

{i.field2}

I am able to see the values . Please correct me where I am going worng?

Answer 1

Creating a child component and passing values down is definitely one of many approaches you can use, another approach can be to "restructure" or modify your json to include all the necessary metadata to iterate over the properties as follows:

from:

this.tempData = [{ 'field1': 'name', 'field2': 'type' }];
this.fields = ['field1', 'field2'];

to:

this.fieldData = [{fieldName: 'field1', fields: ['name']}, {fieldName: 'field2', fields: ['type']}]

template.html:

<template for:each={fieldData} for:item="item">
    <template for:each={item.fields} for:item="field">
       <div  key={field}>
         {field} 
       </div>
     </template>
 </template>

Just a heads up, when passing down arrays of data to children components, you need to consider the following:

Arrays Proxied When Passed to Child Components

A page that’s using a component that passes a large array of objects through layers of child components can become unresponsive.