How to set fieldName value from connectedCallBack in LWC

Question

I am trying to parse a JSON string from one of the fields on a record within JS and trying to display the array of items on my lightning-datatable. I am using LWC for this implementation.

JSON string:

{"students" : 
  [
    {
    "studId" : "089180000AA0091",
    "classRank": "43",
    "topped": "Biology",
    "gradeCode":"CURIOUS",
    "subjCode":"989877788" 
    },

    {
    "studId" : "089180000AA0092",
    "classRank": "44",
    "topped": "Biology",
    "gradeCode":"SCORER",
    "subjCode":"989877788"  
    }
  ]
}

LWC's JS:

childRecords = [];
toDisplay = [];
connectedCallback() {
    this.data = '';
    this.parseData = [];
    this.childRecords = [];
    this.toDisplay = [];
    getJsonString({myId:this.recordId})
    .then(result => {
        this.data= result;
        this.parseData = JSON.parse(this.data);
        this.parseData.students.forEach( recItem =>{
            console.log(recItem.studId);
            console.log(recItem.classRank);
            console.log(recItem.topped);
            this.childRecords.push(recItem);
        });
        this.childRecords.forEach(student=>{
            this.toDisplay.push(JSON.stringfy(student));
        });
    })
    .catch(error => {
        console.log('Errored out.');
    });
}

HTML

<lightning-datatable key-field="studId" data={toDisplay} columns={studColumn} 
        hide-checkbox-column data-id="student">
 </lightning-datatable>

So, here is the Columns I have right now.

const COLUMNS = [
{ label: 'StudentID', initialWidth: 180, fieldName: 'studId', type: 'text', sortable : false, wrapText: true }, 
{ label: 'Class Rank', initialWidth: 300, fieldName: 'classRank', type:'text', sortable : true ,wrapText: true, hideDefaultActions: true},  
{ label: 'Topped',initialWidth: 150, fieldName: 'topped', type:'text', hideDefaultActions: true},   
{ label: 'Grade Code',initialWidth: 155, fieldName: 'gradeCode', type:'text', wrapText: true, hideDefaultActions: true}
];

I would like to somehow wire the values I get from my parsed JSON to set the value for fieldName. If there is any better way then this approach, I would like to try it out.

Answer 1

You need to track your toDisplay array properly.

LWC can track scalar values like strings and integers automatically, but it can't track values INSIDE an array.

Add:

@track toDisplay = [];

OR, try assigning an whole new array to toDisplay. Create a temporary array, add all your items to that and then assign that to toDisplay when you are done with the forEach loop.

I recommend going with the second option, because you will avoid triggering a rerender cycle each time you add an item to the array.

FINALLY you are re-encoding the result as a string again - the datatable needs an array, not a string as it's datasource.

I think you will need something like this:

getJsonString({myId:this.recordId})
.then(result => {
    this.data = result;
    this.parseData = JSON.parse(this.data);
    this.toDisplay = this.parseData.students;
})
.catch(error => {
    console.log('Errored out.');
});

Notice no loop necessary - all the data is already in the correct format.

This ALL depends on the data flow. Are you receiving a JSON string for you Apex call result?

IF a string, the dataflow is this:

Call Apex -> recieve JSON string -> parse to Javascript Object -> Extract array -> Assign this array to the datatable.

IF you are getting actual array from the Apex method, then the dataflow is this:

Call Apex -> recieve Javascript Object -> Extract array -> Assign this array to the datatable.

Answer 2

I am updating the code below:

JS :

    studColumn = COLUMNS
    @track toDisplay = [];

    connectedCallback() {
        getJsonString({myId:this.recordId})
            .then(result => {
                console.log(result);
                var parseData = JSON.parse(result);
                this.toDisplay=parseData.students;
                console.log(JSON.stringify(this.toDisplay));
            })
            .catch(error => {
                console.log('Errored out.');
            });
    }

HTML :

        <lightning-datatable key-field="studId" data={toDisplay} columns={studColumn} 
        hide-checkbox-column data-id="student">
        </lightning-datatable>