My nested string-list template table in LWC is working well, but as a js/LWC noob, I'm struggling with making some enhancements, particularly adding new data points to .
I need to add some information to the top level of data - I currently have a row displaying the map key, but I need to add a couple of links to that row. These links are contained in every row of the list in the map, but I can't figure out how to get that data outside of the iteration template for that map.
Here is the js, with my most recent failure commented out
import { LightningElement, api, wire } from 'lwc';
import getRecords from '@salesforce/apex/CoachPortalHelperClassesEYD.getDeliverables';
export default class CPAssignmentList extends LightningElement {
@api TimeFrame;
displaydata = false;
isreview = false;
deliverables=[];
acceptLinks=[];
declineLinks=[];
@wire(getRecords, { TimeFrame: "$TimeFrame" })
getResults(result) {
if(this.TimeFrame == 'Open'){
this.isreview = true;
}
if (result.data) {
const deliverableMap = result.data;
console.log(JSON.stringify(deliverableMap));
for (const key in deliverableMap) {
this.deliverables.push({value: deliverableMap[key], key}); //Here we are creating the top level array to show on UI.
//this.deliverables.acceptLink = deliverableMap[key][0].acceptLink;
//this.deliverables.declineLink = deliverableMap[key][0].declineLink;
}
this.displaydata = true;
} else {
console.log('Error');
}
}
}
Here is the relevant subsection of the HTML - I'm not sure you need the rest of it since it all displays fine - I just can't figure out how to get the accept and decline links to appear.
<template for:each={deliverables} for:item="sow">
<tr class="sowHeaderRow" key ={sow.key}>
<template lwc:if={isreview}>
<td data-label="SOW Name" colspan="2">
<strong>{sow.key}</strong>
</td>
</template>
<template lwc:else>
<td data-label="SOW Name" colspan="4">
<strong>{sow.key}</strong>
</td>
</template>
<td>
<template lwc:if={isreview}>
<a href='{sow.acceptLink}' >Accept</a>
<a href='{sow.declineLink}' >Decline</a>
</template>
</td>
</tr>
<template for:each={sow.value} for:item="sowli">