Nested for:each Loop to render Data in LWC

Question

let fieldConfigs = [
    {"fieldApiName":"Id","label":"Id"},
    {"fieldApiName":"Full_Name__c","label":"Full_Name__c"},
    {"fieldApiName":"Username","label":"Username"},
    {"fieldApiName":"Email","label":"Email"}
];


let objRecDetails = [
    {
        "Id":"0053m00000BuHPSAA3",
        "Full_Name__c":"Anessa Winter",
        "Username":"[email protected]",
        "Email":"[email protected]"
    },
    {
        "Id":"0053m00000BuHVuAAN",
        "Full_Name__c":"Anthony Garmoe",
        "Username":"[email protected]",
        "Email":"[email protected]"
    }
]

I have to make Html File generic. As of now User fieldapiNames I have hardcoded as Full_Name_c, username and Email. But in generic code, these fieldapi name should be from fieldConfigs. How to handle this.

Answer 1

There are no "expressions" in LWC, as there is in Aura. You have to tabulate your data into a multidimensional array.

let tableData = objRecDetails.map((row, rowIndex) => ({
  key: rowIndex,
  values: fieldConfigs.map((field) => ({
    key: field.fieldApiName,
    value: row[field.fieldApiName],
  }))
}));

For each row, we iterate over each field, making the resulting data look like:

[
  {
    "key": 0,
    "values": [
      { "key": "Id", "value": "0053m00000BuHPSAA3" },
      { "key": "Full_Name __c", "value": "Anessa Winter" },
      { "key": "Username", "value": "[email protected]" },
      { "key": "Email", "value": "[email protected]" }
    ]
  },
  {
    "key": 1,
    "values": [
      { "key": "Id", "value": "0053m00000BuHVuAAN" },
      { "key": "Full_Name__c", "value": "Anthony Garmoe" },
      { "key": "Username", "value": "[email protected]" },
      { "key": "Email", "value": "[email protected]" }
    ]
  }
]

From there, we iterate over each row to generate the output:

<template iterator:row={tableData}>
  <tr key={row.value.key}>
    <template iterator:field={row.value.values}>
      <td key={field.value.key}>{field.value.value}</td>
    </template>
  </tr>
</template>