function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NightFoxNightFox 

LWC - Javascript object is not reactive with Wrapper class object

HI, Could you please guide me how to make the wrapper class object reactive in LWC js. 

I believe that @track properties are reactive but when I change the value of any property in `this.coreAttributes` js object, its not reflective in on `Save` button click 

Js file

import { LightningElement, track, api } from "lwc";
import queryCoreAttributes from "@salesforce/apex/P1PlantInfoPromptSolar.queryCoreAttributes";

export default class P1PlantInfoPromptSolar extends LightningElement {
@track coreAttributes;

connectedCallback() {
    queryCoreAttributes()
    .then(result => {
      this.coreAttributes = JSON.parse(result);
    }) 
    .catch({

    });

    this.promptSpecificAttributes = {
      noOfBlocks:"",
      flatHierarchy:false,
      drivePlus:false
    };
  }
saveP1PlantInfoPromptMetadataHandler(){
    console.log(' prompt specific att -> '+ JSON.stringify(this.coreAttributes));
  }
}
html file 
<template for:each={coreAttributes} for:item="coreAttribute">
              <tr key={coreAttribute.key}>
                <th>{coreAttribute.attributeHeader}</th>
                <td>
                  <template if:false={coreAttribute.isPicklist}>
                    <input type={coreAttribute.attributeDataType} name={coreAttribute.attributeHeader}
                     value={coreAttribute.attributeValue}/>
                  </template>
                  <template if:true={coreAttribute.isPicklist}>
                    <select size="1" name={coreAttribute.attributeHeader}>
                      <option value="None">--None--</option>
                      <template for:each={coreAttribute.picklistValues} for:item="attributePickValues">
                        <option key={coreAttribute.key} value={coreAttribute.attributeValue}>{attributePickValues}</option>
                      </template>
                    </select>
                  </template>
                </td>
              </tr>
<lightning-button
        class="slds-m-left_small"
        variant="brand"
        label="Save"
        title="Save"
        onclick={saveP1PlantInfoPromptMetadataHandler}
      ></lightning-button>
            </template>


 
NightFoxNightFox
my apex class  
public with sharing class P1PlantInfoPromptSolar {

@AuraEnabled(cacheable=true)
    public static String queryCoreAttributes() {
        List<Core_Attribute__c> coreAttributesList = new List<Core_Attribute__c>();
        Map<Id,Set<String>> picklistValuesToPicklistMasterMap = new Map<Id,Set<String>>();
        
        coreAttributesList = [SELECT Id, Name, Data_Type__c, Type__c, Picklist_Master__c 
            FROM Core_Attribute__c WHERE Base_Asset_Name__c IN (SELECT Id FROM Base_Asset_Template__c WHERE Name = 'Base PV Plant') 
            ORDER BY Name ASC];
        
        picklistValuesToPicklistMasterMap = Utils.getPicklistValues(); 

        System.debug(' picklistValuesToPicklistMasterMap '+ picklistValuesToPicklistMasterMap);

        List<coreAttributesWrapper> coreAttributesWrapperList = new List<coreAttributesWrapper>();
        for(Core_Attribute__c coreAttribute : coreAttributesList){
            coreAttributesWrapper coreAttWrapper = new coreAttributesWrapper();
            coreAttWrapper.attributeHeader = coreAttribute.Name;
            coreAttWrapper.attributeDataType = coreAttribute.Data_Type__c.toLowerCase();
            coreAttWrapper.picklistValues = (coreAttribute.Data_Type__c == 'Picklist') ? picklistValuesToPicklistMasterMap.get(coreAttribute.Picklist_Master__c): null;
            coreAttWrapper.isPicklist = (coreAttribute.Data_Type__c == 'Picklist');
            coreAttWrapper.attributeValue = '';
            coreAttributesWrapperList.add(coreAttWrapper);
        }
        System.debug(' core Att '+ coreAttributesWrapperList);
        return JSON.serialize(coreAttributesWrapperList);
    }

    public class coreAttributesWrapper{
        public String attributeHeader;
        public String attributeDataType;
        public Set<String> picklistValues;
        public boolean isPicklist;
        public String attributeValue;
    }
}

 
AbhishekAbhishek (Salesforce Developers) 
Hi Night,

Can you try the suggestion as mentioned in the below,

https://salesforce.stackexchange.com/questions/301273/wrapper-class-variable-show-as-undefined-in-lwc

It might help you.
NightFoxNightFox
Hi @Abhishek, for me values are displayed. the issue is the wrapper object in JS is not reactive, though it is declared with @track. Anyway thanks for your suggestion. please help me in my another post also - 
https://stackoverflow.com/questions/62081474/lwc-wrapper-object-values-are-nullified-on-input-tag-value-change  

Thanks
 
Praveen Kumar R 6Praveen Kumar R 6
Hi @NightFox,

Have you found any solution for this?
JAVED AHMED 1JAVED AHMED 1
hii all,
i want result like this with lwc(https://rajvakati.com/2018/02/18/usage-of-lightningduallistbox/),
can anyone tell what i m doing wrong in this code below is the code

js file
import { LightningElement,track,wire,api} from 'lwc';
import getopp from '@salesforce/apex/WrapperclassForOpportunity.getopp';
export default class MultiPickList1 extends LightningElement {
@api contactlist=[];
@wire(getopp) opplist({error,data}){
         if (data) {
                this.contactlist = data[0].conlist;  
                alert('this.contactlist@@ '+ JSON.stringify (data[0].conlist) );
                alert('contactlist:'+this.contactlist);                               
        
        }
    }
}


html file 
<template>
    <lightning-card title="Multi select Picklist ">
        <lightning-dual-listbox 
      name="languages"
      label="Select Record"
      source-label="Available Contact Record"
      selected-label="Selected Contacted Record"
      options={contactlist}
      onchange={handleChange}>
  </lightning-dual-listbox>
    </lightning-card>
</template>


wrapper class
public class WrapperclassForOpportunity {
    @AuraEnabled(cacheable=true)
    public static List<payWrap> getopp(){
        List<payWrap> accWrapperList = new List<payWrap>();
        opportunity getopp=[select id, accountid,closedate,stagename from opportunity where id=:'0062v00001TDCVoAAP'];
         system.debug(getopp);
        account acc= [select id, name from account where id=:getopp.accountId];
         system.debug(acc);
        list<contact> conlist1=new list<contact>();
        conlist1=[select name from contact where accountid=:acc.id]; 
        if(!conlist1.isEmpty()){
            payWrap myWrap= new payWrap();
            mywrap.conlist=conlist1;
            accWrapperList.add(myWrap);
        }
        system.debug(accWrapperList);
        return accWrapperList;    
    }  
    public class payWrap{
        @AuraEnabled
        public List<Contact> conlist{get;set;}    
    }
}