0

I have a lightning-datatable with editable columns. When changes are made and the user presses Save, it calls handleSave(event), which pulls the draftValues and will call Apex to update the records.

I also want to update the data displayed in the table without making another server call (it could be hundreds of records that have built incrementally in loadMore batches). Therefore, when I get the data originally, I'm pulling it as a map, and then using Object.values(responseMap) to pull the list of data to be displayed in my datatable.

Since I have the responseMap, my plan is to update that map, accessing the right record by using the id value in the draftValues, and cycling through the other fields that have been updated. Then after all the updates to the map are made, I'll refresh the map to array assignment.

The problem I'm having is setting the values in the map. Here's my code (pardon all the console.log statements!). I've commented where I'm getting an error -- on the line where I'm trying to access map.id.field. Since the id is dynamically assigned, it's [rid], and the field is dynamically assigned, it's [key]. It doesn't seem to like the object[objectKey][subObjectkey] syntax.

    handleSave(event){
        var rMap = this.responseMap;
        console.log(JSON.stringify(event.detail.draftValues)) ;
        const draftChanges = event.detail.draftValues;
        //update responseMap so changes will show in Browser
        draftChanges.forEach(function(response){
            const rid = response.id;
            console.log('thisresponse:  ' + JSON.stringify(response));
            console.log('thisresponseId:  ' + response.id);
            for (const key in response) {
                if(key !== 'id'){
                    console.log('from responseMap firstName: ' + rMap[rid].firstName);

//this next line is where I get the error, trying to access the value in the map
                    console.log('from responseMap [key]: ' + rMap[rid][key]]);
                    console.log(key + ': ' + response[key] );
                    rMap[rid][key] = response[key];
                    } 
                }  
            });
            this.responseMap = rMap;
            this.responses = Object.values(rMap);

            //process draftChanges and save with Apex method

            // Clear all draft values
            this.draftValues = [];
        }

Here are the console results:

reactor.js:4 [{"reaction":"pat","id":"a0C5C000008MJRXUA4"}]
reactor.js:4 thisresponse:  {"reaction":"pat","id":"a0C5C000008MJRXUA4"}
reactor.js:4 thisresponseId:  a0C5C000008MJRXUA4
reactor.js:4 from responseMap firstName: Tedman
reactor.js:4 from responseMap [key]: undefined
reactor.js:4 reaction: pat

The error I get is that "soft error" message:

This page has an error. You might just need to refresh it. First, would you give us some details? (We're reporting this as error ID: -1887755971)

...and the "Technical Stuff" doesn't mean anything to me:

 [NoErrorObjectAvailable] Script error.
a()@https://static.lightning.force.com/cs62/auraFW/javascript/BD4UGoez245sNnTgn1sJJg/aura_prod.js:907:85
{anonymous}()@https://static.lightning.force.com/cs62/auraFW/javascript/BD4UGoez245sNnTgn1sJJg/aura_prod.js:907:278
go.dispatchEvent()@https://static.lightning.force.com/cs62/auraFW/javascript/BD4UGoez245sNnTgn1sJJg/aura_prod.js:12:5299
go.handleInlineEditSave()@https://platform-data-9946.lightning.force.com/components/lightning/datatable.js:11:21394
  • That wouldn't be supported. You'd need a different approach. – sfdcfox Mar 23 at 23:58
  • To clarify... I can't use a dynamic term to access a nested property? Or are you saying my broader strategy won't work? There is a finite set of fields that can be updated, so I can use a long list of else if statements to cycle through. That will let me use the specific name. – PatMcClellan__c Mar 24 at 0:11
0

Here's how I got it to work. I'm cloning the original map into rMap using JSON.parse(JSON.stringify(this.responseMap)). That allows me to make the changes to the respective subobjects. Then, I reverse it at the end.

handleSave(event){
    var rMap = JSON.parse(JSON.stringify(this.responseMap));
    console.log(JSON.stringify(event.detail.draftValues)) ;
    const draftChanges = event.detail.draftValues;
    //update responseMap so changes will show in Browser
    draftChanges.forEach(function(response){
        const rid = response.id;
        console.log('thisresponse:  ' + JSON.stringify(response));
        console.log('thisresponseId:  ' + rid);
        for (const key in response) {
            if(key !== 'id'){
                rMap[rid][key] = response[key];
                } 
            }  
        });
    this.responseMap = JSON.parse(JSON.stringify(rMap));
    this.responses = Object.values(rMap);

    //process draftChanges and save with Apex method

    // Clear all draft values
    this.draftValues = [];
}

So, it works. Am I doing something not-cool here? Is there a better way?

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.