0

enter image description here

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.

1
  • Please don't paste code as a screenshot. It is inaccessible to screen readers and also makes it harder for us to you help you, as we then have to type out all the code instead of being able to copy and paste. Please edit your question to include the actual code. Use the {} button in the question editor to properly format your code.
    – sfdcfox
    Aug 26, 2023 at 13:35

1 Answer 1

0

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>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .