JavaScript: Remove Duplicate Objects From Array

JavaScript: Remove Duplicate Objects From Array

In this tutorial, we will explain to you, many ways to remove duplicate objects from an array in javascript.

This tutorial has the main purpose to describe the best ways to remove duplicate objects from JavaScript Array based on specific property/key. Key means id, name, code, etc.

Remove duplicate objects from an array using js array methods like, new Set(), forEach() , for loop, reduce(), filter() with findIndex() methods.

Or you should also read this javascript array posts:

How to remove duplicate objects from JavaScript array ?

javascript has various methods like, new Set(), forEach() method, for loop, reduct(), filter() with findIndex() to remove duplicate objects from javascript array.

In the below, we will demonstrate to you javascript methods with examples for removing duplicate objects from the array.

Consider that we have an id and name of JavaScript array objects. And it has contains duplicate objects. You can see below:

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];

Let’s start to removing duplicate objects from a javascript array using several javascript methods:

First Method – Remove duplicate objects from array in JavaScript Using new Set()

You can use the new set() method to remove the duplicate objects from an array in javascript.

We have objects of the array in javascript. And it has contains duplicate objects. You can see below:

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];

Here we will create a custom javascript function using the new set() method for removing the objects from an array in javascript:

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];

function removeDuplicateObjectFromArray(array, key) {
  var check = new Set();
  return array.filter(obj => !check.has(obj[key]) && check.add(obj[key]));
}

console.log(removeDuplicateObjectFromArray(arr, 'name'))
javascript remove duplicate objects from array

Second Method – JavaScript remove duplicate objects array using for loop

Next, we will create a new javascript function using for loop to remove duplicate objects from the javascript array.

You can pass the duplicate objects array with the key in this function and it will return the unique array.

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];
function removeDuplicateObjectFromArray(array, key) {
    let check = {};
    let res = [];
    for(let i=0; i<array.length; i++) {
        if(!check[array[i][key]]){
            check[array[i][key]] = true;
            res.push(array[i]);
        }
    }
    return res;
}
console.log(removeDuplicateObjectFromArray(arr, 'name'))

javascript remove duplicate objects from array

Third Method – Remove duplicate objects from array javascript using foreach

You can use the javascript forEach() method to remove the duplicate objects from an array in javascript.

Here we will create a javascript function using forEach, which is used to remove duplicate objects from an array in javascript. You can see the method below:

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];

function removeDuplicateObjectFromArray(array, key) {
    var check = {};
    var res = [];
    array.forEach(element => {
        if(!check[element[key]]) {
            check[element[key]] = true;
            res.push(element);
        }
    });
    return res;
}

console.log(removeDuplicateObjectFromArray(arr, 'name'))

javascript remove duplicate objects from array

Fourth Method – JavaScript remove duplicate objects from an array using filter

You can use the JavaScript filter method with findIndex() to remove the duplicate objects from an array in javascript.

You can see the function and example below. In this javascript pass the array and key and it will return the new array with unique objects.

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];
function removeDuplicateObjectFromArray(array, key) {
    return array.filter((obj, index, self) =>
        index === self.findIndex((el) => (
            el[key] === obj[key]
        ))
    )
}
console.log(removeDuplicateObjectFromArray(arr, 'name'))


javascript remove duplicate objects from array

Five Method – javascript remove duplicate objects from array using reduce

You can use the javascript reduce() method for removing duplicate objects from an array using reduce.

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];

    var uniqueArray = arr.reduce((filter, current) => {
      var dk = filter.find(item => item.name === current.name);
      if (!dk) {
        return filter.concat([current]);
      } else {
        return filter;
      }
    }, []);

   console.log(uniqueArray)
javascript remove duplicate objects from array

You may like more javascript array methods with examples, Find below:

Recommended JavaScript Tutorial

  1. JavaScript Array splice() Method By Example
  2. Sorting Using JavaScript Array Sort() Method
  3. JavaScript: Clone an Array & Object By Examples
  4. JavaScript: Convert String to Array JavaScript
  5. Remove First, last and specific Element From Array Javascript
  6. javaScript Push() Array By Example
  7. javaScript Push Array, Items Into Array Example
  8. JavaScript Check the Object | isArray() Function
  9. javaScript Methods: Remove Element from Array javaScript
  10. Convert Array to Comma Separated String javaScript
  11. Javascript – Remove Duplicates from Array

Leave a Reply

Your email address will not be published. Required fields are marked *