Get a Unique List of Objects in an Array of Object in JavaScript

Recently, I needed a way to ensure that my JavaScript array of objects does not contain any duplicates objects based on an ‘id’ key. While I do enjoy more common approaches to this solution with the use of a simple for loop it is always a bit of fun to see how folks have come up with modern solutions.

It wasn’t too long before I stumbled across this ES6 one-liner:

Pretty neat, huh?

Here are too locations I found them:

But as many code oneliners are, they are a little tricky to understand. So I wanted to spend some to understanding how this worked and thought, you might find this a little interesting too.

Let’s take a look at an example and then work through each bit as we go.

 

The Example

In the example above, we want to create a unique array of objects based on the ‘name’ property of each object set.

You can see that there is a duplicate property in positions 1 and 4 with key ‘name’ and value, ‘Alessia Medina’ that we need to remove.

You can also change the key to either the ‘character’ or ‘episodes’ property.

When the distinct array of objects is created it will set the last duplicate object as the object value. Why? Because the script will essentially reassign the ‘name’ property each time it loops through the array when creating the new map.

Let’s start breaking down the script so we can see how each one operates.

Code Breakdown

myObjArray.map

The first task of this script remaps the array of objects using the JavaScript map() method. This method takes a function, which in our is an arrow function.

Map method arrow functions generally look like this:

As an ordinary function, it would look like this:

In our example above, we have our callback arguments on a new line so we will also need to include curly braces {}.

With the map method, the function will act on each array and return the result to generate a new array of the same length.

For us, our call back condition rebuilds each array to make a sub-array containing the value of each name key in the array as the zeroeth element and the object at the first element.

So the first element in the new array will look like this:

new Map

A quick side example

Before we continue, let’s take a quick look at a basic Map process on a 2d array:

To be frank, I didn’t really understand the Map object too well until I explored this script.

Map object stores key-value pairs similar to an Object. However, the Map maintains the insertion order of the properties. You’ll see Map objects often displayed like this when logged out in the console.

Map can be iterated through in a similar way to a 2d array with the zeroeth element as a key and the next element as a value for each property of the map – ['key', 'value'].

Alternatively, we can also generate a Map from a 2d array as we did in the example above – turning each sub-array into a key-value pair.

Back to our main example…

new Map of our example

We are using the data we retrieved from our previous example here to remove some of the clutter from the process. I have added those results at the top of the code block above.

In this example, we simply apply new Map to this array of data. By doing this Map turns into a type of Object with a key-value pair. Now keep in mind that Object keys are the highlander of data types – there can be only one.

What does this mean beyond a bad joke that really shows my age?

It means that each key must be unique. All of our keys are now the names of our users. The new Map constructor process with then iterate through each name and store it and then assign its value. If a key already exists it will overwrite it with this next value with the same key name.

This means that the last duplicate key will always be displayed. Effectively only storing unique values.

Displaying the keys of each property in the Map

We can generate iterators to go through each key or value with the keys() and values() methods respectively.

We will have a look at the keys() method first quickly.

Let’s apply keys() to our test_uniqueObjArray_NewMap Map we generated above.

As you can see this produces an iterator of all the (unique) keys in our data as a Map Iterator. It’s not quite an array of objects, but it allows us to iterate over each key to do something with it.

The same is true for the values() method.

Displaying the values of each property in the Map

Here we want to get an iterator of our values so that we can recreate an array of objects again.

Using the values() iterator method we now have our Map values ready to go.

Using the spread syntax to create our array of object

Now that we have an iterator of our unique values we can now place them in our spread syntax – “...“.

When you apply the spread syntax on an array, it will add each item of an iterable to the array. Take a look at what it does to our Map values.

This is similar to using the Array.from() static method that would look like this:

Performance

So how does this one-liner stack up against a more traditional for-loop like this?

Surprisingly better than I thought it would, to be honest.

Running a benchmark test with jsbench.me, the one-liner ran only 13.74% slower. Which is pretty good compared to some of the other options I found out there.

Conclusion

So should you be using this oneliner over the for loop? Is an impressive one-liner better than something more clear? To be honest, I am on the fence.

I do like the way this script operates. It is clean and once I got my head around the Map object, it did make a lot of sense. I think if I saw something like this in the wild I could pretty easily identify what it was for and see that it was a nice short solution to a problem.

I don’t think I would use this approach when I need to iterate over objects in the many thousands. Then speed becomes important. But if I need something in my toolkit to solve a problem like this, then I am definitely going to use it.

I have an example of how I used the code to check for duplicate selections of files in Google Drive here:

Create a Google Workspace Add-on file picker card with CardService that opens a Google Picker in an overlay window – Google Apps Script

 

What do you think? Is it too abstract or is it elegant?

Did this tutorial help you understand the JavaScript one-liner better? Do you think you would apply it in your own projects?

Please let me know your thoughts in the comments below. I really enjoy hearing how things are used in the wild.

 

Google Apps Script: Create multiple versions of a document based on Google Sheet Data and a Google Doc Template (Mail Merge)

Google Apps Script: SpreasheetApp, DocumentApp, DriveApp; Google Sheets, Google Docs

If you have ever worked in LibreOffice or Microsoft Excel you will probably be familiar with the mail merge. Traditionally, mail merge is used to create multiple versions of a document and snail-mail them to someone.

These days, we don’t often use the snail mail approach, but it is a regular occurrence for us to need to produce multiple versions of reports based on a data set usually from a spreadsheet.

In this tutorial, we will create a document merger that will create new Google Documents based on a dataset from a Google Sheet using Google Apps Script.

If you want to quickly jump into your own project with our script, I’ll provide you with a quick-use guide.

Then, we will set up a template for our Google Doc and generate our Google Sheet data (don’t worry, I’ll share the document so you can follow along).

Finally, we will jump into the breakdown of the code for those legends who are learning how to create their own Google Apps Script.

Let’s get started:

Note: As always, take what you need and don’t worry about the rest. 

Continue reading “Google Apps Script: Create multiple versions of a document based on Google Sheet Data and a Google Doc Template (Mail Merge)”

Google Apps Script: Add and removed Google Sheets columns based on a search array

Google Apps Script: V8 engine, map, filter, reduce, includes, 2d arrays, matrix

Have you ever wanted to delete or add columns in a Google Sheet, based on another set of Sheet data?

I know I have.

There have been a number of instances where I wanted to insert new columns or removed unused columns in large Google Sheets projects with Google Apps Script.

In the past, I have dynamically set headers based on something like an IMPORTRANGE or FILTER, or simply from an array ({}) from another sheet tab or Google Sheet. However, when I update the original data the headers change but all the data underneath them does not move along to the updated column with it.

Now all my data is not lined up with the header! As you can imagine, this creates some serious problems.

In this tutorial, we’ll show you how to use Google Apps Script to update your headers based on another sheets values. These sheets values can come from the current Google Sheet workbook or another one. We will also ensure that the data below the headers is migrated along with the new header location.

Take a look at the visual example below:

Add removes columns based on a search array visual example

As always, read as much or as little as you need to get the job done or learn the skill. 

Continue reading “Google Apps Script: Add and removed Google Sheets columns based on a search array”

Google Apps Script Course – Part 4: 2D Array Data Transformation of Multiple Question Multiple Group Items Data to Total Count of Rating Choices in Google Sheets

Google Apps Script, Google Sheets, SpreadsheetApp, 2d arrays

<<Part 3                                         <<Intro>>

In Part 3 of our 2D array data transformation course in Google Apps Script, we worked out how to get the count of each choice of each question item from the survey results in a Google Sheet.

This time we are going to add a final element to our mix. Let’s say we have multiple questions and multiple groups. We want to find out the count for each choice for each question for each group.

Continue reading “Google Apps Script Course – Part 4: 2D Array Data Transformation of Multiple Question Multiple Group Items Data to Total Count of Rating Choices in Google Sheets”