LWC, Add a property to a record from an array of object

Question

I'm writing a lwc where i need to manipulate a datatable which is filled with a wrapper of 2 objects.

My apex: (SkillsReferencialAndMapping is just a wrapper with 2 parameter, which are 2 sObjects)

public with sharing class DatatableSkillsOnSR {

/**
 * @description getDatatable get the Conformity check related to one conformity
 * @param  confId recordId the Conformity
 * @return return a list of ConformityCheck__c
 */
@AuraEnabled(cacheable=true)
public static List<SkillsReferentialAndMappingObj> getSkillFromSRID (Id srId) {

    ServiceResource sr = [SELECT RelatedRecord.ServiceGroup__c FROM ServiceResource WHERE Id =: srId limit 1];

    String srService =  sr.RelatedRecord.ServiceGroup__c;


    List<SkillMappingReferential__c> listSMR = [SELECT Id, NoCriteria__c, Name, Service__c, ( SELECT Id, SkillMappingReferential__c, IsActive__c, IsAlwaysActive__c FROM Competence__r WHERE ServiceResource__c =: srId) FROM SkillMappingReferential__c WHERE Service__c =: srService];

    // List<ServiceResourceSkill__c> listSRS = [SELECT id, SkillMappingReferential__c, IsActive__c, IsAlwaysActive__c FROM ServiceResourceSkill__c WHERE ServiceResource__c =: srId];

    List<SkillsReferentialAndMappingObj> listSRMObj = new List<SkillsReferentialAndMappingObj>();

    for(SkillMappingReferential__c smr : listSMR){
        SkillsReferentialAndMappingObj srmObj = new SkillsReferentialAndMappingObj();
        srmObj.skillMappingRef = smr;
        if(smr.Competence__r.size() > 0){
            srmObj.serviceResourceSkill = smr.Competence__r[0];
        }
        listSRMObj.add(srmObj);
    }

    return listSRMObj;
}

}

as you can see sometimes i don't have a parameter filled for serviceResourceSkill (my index 0).

On some action i want to create the serviceResourceSkill, so i use a createRecord in the lwc. I also want to update my wrapper in JS. Basically i want to add to my index 0 what i have index 1.

here is my lwc:

@api recordId
_errors = [];
listOfObjects = [];
isLoading = false;

get errors() {
    const errors = this._errors.filter( x => x !== undefined );
    return errors.length > 0 ? errors : null;
}

@wire(getdata, { srId: '$recordId' })
handleResult(result, error){
    if(result.data){
        this.listOfObjects = result.data;
        console.log('this.listOfObjects: ', this.listOfObjects);
    }else if ( error ) {
        this._errors.push( error );
    }
}
onClickSomewhere(event){
console.log('event.target.dataset.id: ' , event.target.dataset.id);
    const index = this.listOfObjects.findIndex(item => item.skillMappingRef.Id === event.target.dataset.id);
this.listOfObjects[index].test = 'zzz';
}

I get the index and id right but on the last line I have the following error, it seems that this.listOfObjects[index] is not an object? I'm kind of lost here. I tryied .push() as for array it doesn't work either.

I played around with this url: https://www.educative.io/answers/how-to-add-property-to-an-object-in-javascript

Making the example into an array of object and adding a property, it works.

Answer 1

Data from a wire method is wrapped in a read-only membrane. This prevents corruption of the cache that wire methods use to reduce the number of calls to the server.

You need to do a deep copy to fix this. In your case, you could change:

    this.listOfObjects = result.data;

To:

this.listOfObjects = result.data.map((x)=>({...x}));

This copies the array and all top-level elements. Note that recursive elements, if any, are not cloned. If you need to clone nested objects, you can use structuredClone:

this.listOfObjects = structuredClone(result.data);

Which will properly clone all objects recursively.