0

I have a wrapper class:

Public class outputWrapper{
 String key;
 String total;
}

I am creating this wrapper using a Apex controller. I use JSON.serialize(outputWrapper); to be returned to the JS. The data in from this wrapper needs to be used in a Data table to be displayed to the user.

JS has:

const columns = [
    { label: 'Key', fieldName: 'key' },
    { label: 'Total', fieldName: 'total' }
];
......
export default class example extends LightningElement {
...
..
wrapper = [];
columns = columns;



    handleDisplay() {
        getData({ some inputs })
            .then((result) => {
                console.log(result); // displays as a JSON string
                this.wrapper = result; // Wish to show this data in a data table
                this.error = undefined;
            })
            .catch((error) => {
                console.log(JSON.stringify(error));
                this.error = error;
                this.wrapper = undefined;
            });
    }

HTML: part of it:

    <template if:true={wrapper}>
        <div style="height: 300px;">
            <lightning-datatable key-field="key" data={wrapper} show-row-number-column
                row-number-offset={rowOffset} hide-checkbox-column columns={columns}>
            </lightning-datatable>
        </div>
    </template>

The JSON structure in the result looks like this:

[
  {
    "key": "key11",
    "total": 40
  },
  {
    "key": "key12",
    "total": 10
  },
  {
    "key": "key13",
    "total": 30
  }
]

I was able to display the fields of records of a custom object. When I saw the JSON that it used for the data table it was like:

[
  0:{
    "customField1": "xyz",
    "customField2": 30
  },
  1:{
    "customField1": "qwe",
    "customField2": 1.0
  },
  2:{
    "customField1": "sdf",
    "customField2": 2.0
  }
]

How do I modify my code to get a JSON structure that I can display using data table? How could I add a key like row to the JSON structure:

[
  row:{
    "key": "key11",
    "total": 40
  },
  row:{
    "key": "key12",
    "total": 10
  },
  row:{
    "key": "key13",
    "total": 30
  }
]

Appreciate the help!

4

You can return your wrapper directly to LWC, no need to serialize:

public class outputwrapper {
  @AuraEnabled public string key;
  @AuraEnabled public string total;
}

...

@AuraEnabled public static outputwrapper[] getStuffFromSystem() {
  outputwrapper[] results = new outputwrapper[0];
  // ... //
  return results;
}

This would minimize the amount of work client-side you need to do. P.S. [ prop: { value }, ] is not a valid JavaScript object; it should appear just like the custom record list you had.

4
  • Question, does it work without { get;set; } ? – Rahul Gawale Jul 16 '20 at 15:03
  • 1
    @rahulgawale Yes, but you need @AuraEnabled. – sfdcfox Jul 16 '20 at 15:04
  • What if the calling method wants JSON in a particular format. Example [ row:{ "key": "key11", "total": 40 }, row:{ "key": "key12", "total": 10 }, row:{ "key": "key13", "total": 30 } ] . Would that be possible? – SfdcBat Jul 16 '20 at 15:09
  • 2
    @SfdcBat That's not valid JSON. [] is an array, which are just indexed items. – sfdcfox Jul 16 '20 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.