How to deserialize JSON array which contains custom fields? Passing data from LWC to APEX

Question

I have an array JSON which contains custom fields as well as some other data as below,

jsonString = '[{"Id":"a2l0E000000WFL2QAO","Name":"TCIP-0000022","SCTC_Product_Description__c":"Men\'s denim apparel | PC0006 - Pants, trousers | PD0003 - 50% [No attribute]  Acrylic,50% Recycled post-consumer  Polyester","SCTC_Raw_Material_Inventory_kg__c":100,"Amount_kg":"30","id":"row-0"},{"Id":"a2l0E000000WFgSQAW","Name":"TCIP-0000024","SCTC_Product_Description__c":"Men\'s denim apparel | PC0006 - Pants, trousers | PD0003 - 50% Sustainably sourced  Bamboo","SCTC_Raw_Material_Inventory_kg__c":100,"Amount_kg":"10","id":"row-1"},{"Id":"a2l0E000000WFRpQAO","Name":"TCIP-0000023","SCTC_Product_Description__c":"Women\'s apparel | PC0002 - Overcoats, jackets, vests | PD0001 - 50% Recycled post-consumer  Polyester","SCTC_Raw_Material_Inventory_kg__c":50,"Amount_kg":"11","id":"row-2"}]';

I was trying to deserialize this JSON at the apex controller below is my code:

JS Controller:

      handleCheck(event) {
        this.inputAmount = 0;
        let selectedRows = [];
       // this.selectedRows = [];
        let rowValue = event.detail.config.value;
        let draftValues = this.template.querySelector("lightning-datatable").draftValues;
        selectedRows = [...event.detail.selectedRows];
        let configSelection = event.detail.config.selection;
        for(let i = 0; i < draftValues.length; i++){
            if(configSelection =='rowSelect' && draftValues[i].id === rowValue){
                let newConcatedRow = {...selectedRows[i],Amount_kg: draftValues[i].Amount_kg};
                this.addition = this.addition + parseInt(draftValues[i].Amount_kg);
                this.selectedRows.push(newConcatedRow);
            }
        }

        //call apex method to for calculations
        console.log(JSON.stringify(this.selectedRows));
        
        testApexMethod({jsonData: this.selectedRows})
            .then(result =>{
                
            })
            .catch(error => {

            })
  }

Apex Controller:

public with sharing class Demo {

    public class DemoWrapper{
        @AuraEnabled
        public String Id{get;set;}
        @AuraEnabled
        public String Name{get;set;}
        @AuraEnabled
        public String SCTC_Product_Description__c{get;set;}
        @AuraEnabled
        public Integer SCTC_Raw_Material_Inventory_kg__c{get;set;}
        @AuraEnabled
        public String Amount_kg{get;set;}
        
    }
    
    @AuraEnabled(cacheable=true)
    public static void testApexMethod(List<Object> jsonData){
        /* Stuck Here */
    }
} 

Problem 1: Unable to parse data using wrapper class as I have custom fields included, I'm unable to directly assign value to wrapper class variables __c characters are reserved Problem 2: Tried to parse data directly using Map and failed, I'm getting errors at runtime

Any help with the code will be appreciated. Thanks in advance.

Answer 1

You're going to have to choose one: (a) rename Amount_Kg to be a proper custom field, and then use the custom object directly, or (b) rename the properties in your wrapper class to not use __ in the name, and then use those in the JS.

With option (a), you can change your method to just:

@AuraEnabled public static void testApexMethod(List<My_Custom_Object__c> records) {
  // ...

This will allow you to skip needing a custom wrapper entirely.

With option (b), you can use your wrapper class, then copy the data to records as you desire:

@AuraEnabled public static void testApexMethod(List<DemoWrapper> wrappers) {
  // ...