TYC Website Design and Application Development. Addis Ababa
How I spent hours displaying objects from chips into a dropdown
The task of copying an object in JavaScript
Yesterday, I had a simple user story at work. The user story was to simply display data that the user selects on an Angular Material chips input into an Angular Material dropdown.
To be honest the data I was working with was a complex object from a database.

Yet, at the core, the task was simply copying objects.
But for simplicities sake, we will just work with a simple fruit object and try to emulate the task here.
So like I said, the task was simply filtering the user-selected objects from DB and having a separate copy. Why a separate copy? Because I needed to maintain the objects selected in the dropdown too.
At the time I was just working with the same object, and the changes on the chips would be reflected in the dropdowns. This was frustrating me and wasting my time.
Until I realize copying an object is not just an assignment operation.
Copying an object could waste your time
Let’s see this as an example:-
const fruit = {
name: "Banana";
price: 23;
}
Copying an object using spread operator
The spread operator ...
is technically used to pass all values of arrays of objects. Hence, what we are doing here is to pass all the key:value
pairs from the original object into the selectedFruit
object.
const selectedFruit = {
...fruit;
}
Copying an object using assign method
Just like the creat method Object
we saw last time, the assign method is used to shallow copy one object into another. And, It has two arguments, the target, and the source object.
const selectedFruit = Object.assign({}, fruit);