“Cannot add property, object is not extensible while running LWC component Salesforce”

While using wire services when we may require to present data in a specific format, let's say in our datable’s without using additional fields.

We might encounter the below error.

The reason is it seems that with Spring 20, the response from the apex has become non-extensible with additional parameters. As a workaround, you can use the map() method to iterate over the array, so that you get a new array with modified elements. The Array.map() method allows you to iterate over an array and modify its elements using a callback function. The callback function will then be executed on each of the array's elements. In our context the use cases would be to iterate over an array of objects.

Example of incoming data from server:[{“Id”:”0038c00002dMIGAAA4",”Name”:”Rose Gonzalez”,”Title”:”SVP, Procurement”,”Phone”:”(512) 757–6000",”Email”:”rose@edge.com”},{“Id”:”0038c00002dMIGBAA4",”Name”:”Sean Forbes”,”Title”:”CFO”,”Phone”:”(512) 757–6000",”Email”:”sean@edge.com”},{“Id”:”0038c00002dMIGCAA4",”Name”:”Jack Rogers”,”Title”:”VP, Facilities”,”Phone”:”(336) 222–7000",”Email”:”jrogers@burlington.com”},{“Id”:”0038c00002dMIGDAA4",”Name”:”Pat Stumuller”,”Title”:”SVP, Administration and Finance”,”Phone”:”(014) 427–4427",”Email”:”pat@pyramid.net”},{“Id”:”0038c00002dMIGEAA4",”Name”:”Andy Young”,”Title”:”SVP, Operations”,”Phone”:”(785) 241–6200",”Email”:”a_young@dickenson.com”},{“Id”:”0038c00002dMIGFAA4",”Name”:”Tim Barr”,”Title”:”SVP, Administration and Finance”,”Phone”:”(312) 596–1000",”Email”:”barr_tim@grandhotels.com”},{“Id”:”0038c00002dMIGGAA4",”Name”:”John Bond”,”Title”:”VP, Facilities”,”Phone”:”(312) 596–1000",”Email”:”bond_john@grandhotels.com”},{“Id”:”0038c00002dMIGHAA4",”Name”:”Stella Pavlova”,”Title”:”SVP, Production”,”Phone”:”(212) 842–5500",”Email”:”spavlova@uog.com”},{“Id”:”0038c00002dMIGIAA4",”Name”:”Lauren Boyle”,”Title”:”SVP, Technology”,”Phone”:”(212) 842–5500",”Email”:”lboyle@uog.com”},{“Id”:”0038c00002dMIGJAA4",”Name”:”Babara Levy”,”Title”:”SVP, Operations”,”Phone”:”(503) 421–7800",”Email”:”b.levy@expressl&t.net”}]

Now if I have to add an additional property to the object the below code to show the list of contacts in a data table would throw the error under consideration.

import { LightningElement, wire } from ‘lwc’;
import getContactList from ‘@salesforce/apex/ContactController.getContactList’;
import RedirectUrl from ‘@salesforce/label/c.RedirectUrl’;
const columns = [
{ label: ‘Name’, fieldName: ‘Name’,type: ‘text’ },
{ label: ‘Website’, fieldName: ‘Title’, type: ‘text’ },
{ label: ‘Phone’, fieldName: ‘Phone’, type: ‘phone’ },
{ label: ‘Email’, fieldName: ‘Email’, type: ‘email’},
{
label: ‘Company Website’,
fieldName: ‘redirectURl’,
type: ‘url’,
typeAttributes: { label: { fieldName: “Name” }, tooltip: “Name”, target: “_blank” }
}
];
export default class Cxpclaimstable extends LightningElement {
columns = columns;
contacts;
error;
// Expose the labels to use in the template.
label = {
RedirectUrl,
};
@wire(getContactList)
wiredContacts({ error, data }) {
if (data) {
console.log(JSON.stringify(data));
this.processData(data);
this.error = undefined;
} else if (error) {
this.error = error;
this.contacts = undefined;
}
}
processData(dataToManipulate){
let dataFromServer={…dataToManipulate};
dataToManipulate.forEach((element) => {
element.redirectURl=this.label.RedirectUrl+element.Name;
console.log(element);
});
this.contacts = dataFromServer;
console.log(JSON.stringify(this.columns));
}
connectedCallback(){
}
}
<template>
<div >
<lightning-datatable
key-field=”id”
data={contacts}
columns={columns}
show-row-number-column
hide-checkbox-column>
</lightning-datatable>
</div>
</template>

So as to overcome the error let's see the use of map functions in javascript which will create a new array.

processData(dataToManipulate) {
let reformedClaimsData = dataToManipulate.map((element, index, array) => {
return {
“Id”: element.Id,
“Name”: element.Name,
“redirectURl”: this.label.RedirectUrl + element.Name + index,
“Title”: element.Title,
“Phone”: element.Phone,
“Email”: element.Email
}
});
console.log(reformedClaimsData);
this.contacts = reformedClaimsData;
}

The new array would serve as the data source for the data table. Thanks for reading this tutorial.Happy to contribute.