How to get unique items or values from an Array JQuery

Introduction

There are lots of ways by using programming techniques to filter the array data and get the unique item value(s) out of it. 

In this post, I will show how to filter the array data and get the unique item values from it by using JQuery.

Again, there are many ways to do the same in JQuery but I will show you one of many ways which I find is easy to use and implement.

Prerequisites

• Basic knowledge of JQuery - To know more about the same, please see this site https://jquery.com/
• CDN Reference of JQuery library which will be used in our JQuery script - JQuery CDN latest Stable Versions can be found here https://code.jquery.com/
• Knowledge of Javascript/JQuery Arrays - To learn or know more about Arrays, please see this site http://www.w3schools.com/js/js_arrays.asp

Let's get started!

To filter and get the unique items from an array, let's create a variable with a name as "fruits" and it has repeating items in it such as:

var fruits = ["Apple", "Oranges", "Grapes", "Guava", "Mango", "Apple", "Oranges", "Grapes", "Guava", "Mango", "Mango", "Apple", "Mango", "Apple", "Mango", "Apple"];

Now, we want to filter this array and we want unique items from the above array i.e. "Apple", "Oranges", "Grapes", "Guava" and "Mango".

To do the same, we will use .grep() function and .inArray() function of JQuery.

In laymen terms, grep() function is a utility function for arrays to filter out values.It finds the elements of an array which satisfy a filter function. The original array is not affected. 

To know more about JQuery grep() function, please see here http://api.jquery.com/jquery.grep/. 

The $.inArray() method is similar to JavaScript's native .indexOf() method in that it returns -1 when it doesn't find a match. If the first element within the array matches value, $.inArray() returns 0.

To know more about JQuery inArray() function, please see here https://api.jquery.com/jQuery.inArray/.

We will create another variable as "uniqueFruits" and in this variable, we will store all the unique items from the "fruits" variable we created above like this:

var uniqueFruits = $.grep(fruits, function (name, index) {

                return $.inArray(name, fruits) === index;

            }); // Returns Unique fruits

In the above lines of code, we now have all the unique fruits in the "uniqueFruits" variable and we can check the same by using alert function of Javascript or we can also check the same in browser console.

Note: We haven't touched/modified the "fruits" array. It still contains the original repeating fruits values.

Here is the browser console output of "uniqueFruits" variable:

console.log(uniqueFruits);

Gives output as:

Here is the browser alert() output of "uniqueFruits" variable:

alert(uniqueFruits);

Gives output as:

Here is the complete code we have used to filter an array and get a unique values out from it:

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

        $(document).ready(function () {

            var fruits = ["Apple", "Oranges", "Grapes", "Guava", "Mango", "Apple", "Oranges", "Grapes", "Guava", "Mango", "Mango", "Apple", "Mango", "Apple", "Mango", "Apple"];

            var uniqueFruits = $.grep(fruits, function (name, index) {

                return $.inArray(name, fruits) === index;

            }); //Returns Unique fruits

            console.log(uniqueFruits); // Or alert(uniqueFruits);          

        });

</script>

In the above lines of code, in the first line, we are referencing to the JQuery CDN library.

In document.ready() function, we are using "fruits" array variable with repeating items in it.

And then by using .grep() and .inArray() function, we are fetching the records from array and checking if it is unique.

If it is unique, we are adding it to "uniqueFruits" variable.

Conclusion

In this post, we have seen how we can get unique items from an array using JQuery.

In my next post, I will share the information on how to get unique values from multidimensional array using JQuery.