Skip to main content
2 of 4
Formatted JS and HTML code
RubenDG
  • 9.6k
  • 2
  • 15
  • 24

LWC: Adding top-level data fields to a nested template from a Salesforce Map

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>&nbsp;&nbsp;&nbsp;
                <a href='{sow.declineLink}' >Decline</a>
            </template>
        </td>
    </tr>
    <template for:each={sow.value} for:item="sowli">