LWC: How to render changes in a nested array

Changes in nested arrays don’t render simply in LWC components even if you add the @track annotation with it. So to achieve this you will have to follow either of the 2 approaches i.e. shallow cloning or deep cloning. Here I am going to explain the shallow cloning approach in which the original object is copied into a new reference object with a new memory address by an assignment operator which has the exact values of the original object and if there is further reference to any object then only the address is copied so if there is any change to the reference object it also changes to the original object. Let’s take an example to make things more clear.

var mainArray = [];
mainArray .push({
'Id' : 1,
'index' : 0,
‘schoolName' : 'abc international school',
‘class’: ‘five’
});

So now if you create a shallow copy of the mainArray and update the id key value it will get updated in the original array also like
let innerData = [...this.mainArray];
innerData[0][‘Id’] = 5;
console.log(‘mainArray ‘ + mainArray );

The output will be :

mainArray [{'Id' : 5,'index' : 0,‘schoolName' : 'abc international school',‘class’: ‘five’}]

As the shallow copy is created only of the mainArray which means only the mainArray has got a new address but the inner object in the new variable i.e. innerData is still referencing the address as of mainArray. So both the new variable(InnerData) and mainArray will show the same output.

If you will update a simple key of the mainArray then only the new variable will show the changes like

innerData[0] = 3;

So now if you console the ‘innerData’ variable it will show [3] as the output but the mainArray will display the same object as defined.
Now let me explain to you the issue I faced working in an LWC component. I took an array inside the main array like :
var innerArray = [];
innerArray .push({
'Id' : 1,
'index' : 0,
‘name' : 'abc',
'rollno' : 2,
'dateofbirth' : '1/1/1987'
});
innerArray .push({
'Id' : 2,
'index' : 1,
‘name' : def,
'rollno' : 3,
'dateofbirth' : '1/7/1987'
});
And then assigned the innerArray to mainArray.
var mainArray = [];
mainArray .push({
'Id' : 1,
'index' : 0,
‘schoolName' : 'abc international school',
‘class’: ‘five’,
‘students’: innerArray
});

Now when I tried to update the name of the student to def it didn’t get reflected in the view, so I researched and found that a shallow copy has to be made for the changes to get reflected. So for that, I created one in which I created a shallow copy of the ‘students’ key of the mainArray. To do that I wrote the following code:

let innerData = [...this.mainArray[0].students];
innerData[1] = { ...innerData[1], name: ‘defg’ };

The … will copy the array into the new variable and then I gave the key of the data I wanted to update and then assigned the shallow copy variable to the mainArray desired key like this

mainArray[0].students = innerData;

And you are ready now.

If you don’t make the assignment back then the ‘innerData’ will show the name as ‘defg’ but the mainArray will still show ‘def’ as the shallow copy is created of the ‘students’ key and the mainArray doesn’t have any information about it. So to inform the mainArray about the changes the reassignment of the student’s key has to be done.

In the same way, you can alter any other value of the student’s key and assign it to mainArray to reflect your changes.

If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams are offered by StudySection along with other programming certification exams.