Return to Revisions

Typically, you manipulate the data in the controller via JS, and then use it in your markup. Because the objects are using JSON, you can add properties even though they aren't in the original object definition. Here's a simple POC:

//Controller with basic payload:

import {LightningElement} from 'lwc';

export default class DcugDynamicLink extends LightningElement {

    payload = [{name: "Peter", id: "123"}, {name: "Gorav", id: "456"}];

    get dynamiclinks() {
        let linkswithrecords = [];
        this.payload.forEach(record => {
            //record is the loop variable
            record.linkurl = 'https://sanctionssearch.ofac.treas.gov/Details.aspx?id='+record.id;
            linkswithrecords.push(record);
        });

        return linkswithrecords;
    }

}

HTML

<template>
    <h1>Dynamic Links</h1>
    <lightning-layout multiple-rows="true" >
    <template for:each={dynamiclinks} for:item="res">
        <lightning-layout-item size="2" key={res.id} class="slds-hint-parent">
                <div class="slds-cell-wrap" title={res.name}>{res.name}</div>
        </lightning-layout-item>

        <lightning-layout-item size="10"  key={res.id} class="slds-hint-parent">
                <div class="slds-truncate">
                    <p><lightning-formatted-url value={res.linkurl} label={res.Name} target="_blank"></lightning-formatted-url></p>
                </div>
        </lightning-layout-item>

    </template>
    </lightning-layout>

</template>