forming a JSOn structure for data table in LWC

Question

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!

Answer 1

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.