2

I have below table in lwc, size of the lineItem list is 11 records and accordingly it created 11 input fields now whenever I add anything on one column it shows on all 11 but the the requirement is add different values in all 11 fields and on a click of a button get all different values.

Button:

<lightning-button label="Apply %" variant="brand" onclick={applyPercentage}></lightning-button>

table:

<template if:true={lineItemData}>
              <template for:each={lineItemData} for:item="lineItem">
                <tr key={lineItem.key}>
                  <td>
                    <lightning-input type="checkbox" variant="label-hidden">
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden"
                      value={lineItem.Apttus_Config2__AttributeValueId__r.APTS_Storage_Category__c}>
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden" value={lineItem.Apttus_Config2__ProductId__r.Name}>
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden" type="number" data-key={lineItem.Id} label="percentageValue" onchange={percentageChange}>
                    </lightning-input>
                  </td>
                </tr>
              </template>
            </template>

JS:

percentageChange(event) {
    this.lineItemData
        .find(item => item.Id === event.currentTarget.dataset.key)
        .percentage = event.target.value;
}

applyPercentage() {
    console.log(JSON.stringify(this.lineItemData));
}
    }

@wire(getIlineItemData, { productConfigId: '$productConfigId' })
LineItemData({ data }) {
    if (data) {
        this.lineItemData = data;
    }
}

Apex:

@AuraEnabled(cacheable=true)
public static List<Apttus_Config2__LineItem__c> getIlineItemData(Id productConfigId) {

    Apttus_Config2__LineItem__c[] uniqueLineItemList = new Apttus_Config2__LineItem__c[0];
    string[] uniqueStringList = new string[0];



    for(Apttus_Config2__LineItem__c lineItem : [SELECT Id,Apttus_Config2__ProductId__r.name, Apttus_Config2__AttributeValueId__r.APTS_Storage_Category__c, Apttus_Config2__ConfigurationId__r.Apttus_QPConfig__Proposald__c
                                                FROM Apttus_Config2__LineItem__c WHERE (Apttus_Config2__ProductId__r.Family='Test'  OR Apttus_Config2__ProductId__r.Family='Storage')
                                                and Apttus_Config2__ConfigurationId__c =:productConfigId]) {
        if(!uniqueStringList.contains(lineItem.Apttus_Config2__ProductId__r.name)) {
            uniqueStringList.add(lineItem.Apttus_Config2__ProductId__r.name);
            uniqueLineItemList.add(lineItem);

        }
    }
    return uniqueLineItemList;
}

lineItem console log:

{"Id":"a4e6E000000Bob9QAC","Apttus_Config2__ProductId__c":"01tw0000005KLpBAAW","Apttus_Config2__AttributeValueId__c":"a4y6E000000NWOGQA4","Apttus_Config2__ConfigurationId__c":"a516E000000HdtqQAC","Apttus_Config2__ProductId__r":{"Name":"1045-Collagen IV","Id":"01tw0000005KLpBAAW"},"Apttus_Config2__AttributeValueId__r":{"APTS_Storage_Category__c":"Frozen","Id":"a4y6E000000NWOGQA4"},"Apttus_Config2__ConfigurationId__r":{"Apttus_QPConfig__Proposald__c":"a3l6E000000BfKoQAK","Id":"a516E000000HdtqQAC"}},{"Id":"a4e6E000000BobAQAS","Apttus_Config2__ProductId__c":"01tw0000005KKoyAAG","Apttus_Config2__AttributeValueId__c":"a4y6E000000NWOHQA4","Apttus_Config2__ConfigurationId__c":"a516E000000HdtqQAC","Apttus_Config2__ProductId__r":{"Name":"10-V-Plex MSD Pro-Inflammatory Panel-RFTS 493","Id":"01tw0000005KKoyAAG"},"Apttus_Config2__AttributeValueId__r":{"APTS_Storage_Category__c":"Ambient","Id":"a4y6E000000NWOHQA4"},"Apttus_Config2__ConfigurationId__r":{"Apttus_QPConfig__Proposald__c":"a3l6E000000BfKoQAK","Id":"a516E000000HdtqQAC"}},

I have updated my question as suggested below, but still I don't see the percentage property in the lineitem array, I request you to please look into it one more time.

Improve this question

1 Answer 1

Reset to default
5

The reason you are not able to get percentage is because the wired data is immutable. So, you can get the clone as below after which it should work:

if (data) {
    this.lineItemData = [...data];
}

I assume data here is the list of records and so using [...]

  1. You do not need key on all tds .
  2. Even if you use label-hidden variant, you need to put label for lightning-input .
  3. You do not need value on the column percentageValue as you should collect and modify corresponding row in lineItemData .
  4. You should use some identifier like data-key to know which row is being modified. Then in the change handler you can assign to exactly that row data field .

HTML:

<td>
    <lightning-input variant="label-hidden" data-key={lineItem.key} label="percentageValue" type="number" onchange={PercentageChange}>
    </lightning-input>
</td>

JS:

PercentageChange(event) {
    this.lineItemData
        .find(item => item.key === event.currentTarget.dataset.key)
        .percentage = event.target.value;
}

Here is the playground link that I created for you.

Improve this answer
5
  • Thank you so much, this is exactly what I need, it is working perfectly in playground but in real time I am not able to see percentage property in line Item array , you have already done a lot but I request you to please look into it one more time and please suggest what i am missing, I have updated the question thank you so much again. Commented Nov 1, 2019 at 12:35
  • instead of returning the list of sobject in apex I even tried creating the wrapper class and created a property name percentage but still not able to get the percentage value from the page, I also tried this.lineItem = {...data} or Object.assign({}, data but still no luck, please suggest. Commented Nov 1, 2019 at 13:36
  • It should not be {...}, it should be [...data]. Added in answer. :) Commented Nov 1, 2019 at 14:36
  • Still it doesn't make any difference, I am getting below error Commented Nov 1, 2019 at 15:01
  • Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'percentage' throws Commented Nov 1, 2019 at 15:02

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.