[SalesForce] Lightning Web Component: pass parameter from html iteration to javascript

I am struggling to manipulate data from an apex query to the javascript. The value I want to display should take value= 100 – Days_To_Close__c for the progress bar. However, in lwc, I cannot do this basic manipulation in the html; it must be done in the js. I've created a method that does this and want to pass progress(proposal.Days_To_Close__c). However, this call is invalid.

HTML:

<template for:each={proposals.data} for:item="proposal">
    <lightning-record-view-form key={proposal.Id} record-id={proposal.Id} onload={handleOnLoad} object-api-name="Opportunity">

       <lightning-progress-bar key={proposal.Id} value=progress({proposal.Days_To_Close__c})></lightning-progress-bar>                          
        </template>

JS: 

@track progress;

@api
get progress(){
return this.progress;
}

set progress(value){
this.progress=100-value;
}

Any advice on how to make the current iteration's field readable in the js?
Thanks!

Best Answer

You have to create a mutable object out of what is returned by the server, since it is read-only. you can achieve this by converting the 1st object to a string and then parsing it, Example:

@wire(searchBears)
loadBears(result) {
    this.bears = result;
    this.bears2 = JSON.parse(JSON.stringify(this.bears));
}

bears 2 is now a copy of bears 1, over which you can iterate and change values or even add new key/values.

You can then create a getter which returnes an array of mutable objects (with the additional property which you can use in your template).

@api
get changesBearsValues() { 

    //iterate over bears2 and add key:value
           ... 
            this.bears2.data[index]['lifeExpectancy']=100-aVariable;
            ...
        });
    }
    return this.bears2;
  }

template:

<template>
    <div>
        <template if:true={changeProgressValue}>
            <div class="slds-m-around_medium">
                <template for:each={changeProgressValue} for:item="bear">
                    <div key={bear.id}>{bear.Name}`s estimated remaining years on this planet:
                        <lightning-progress-bar value={bear.lifeExpectancy} size="large"></lightning-progress-bar>
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>

enter image description here

Related Topic