JavaScript Remove Duplicate From Array of Object

by

To remove duplicate from array of object in javascript es6, es5; Through this tutorial, i am going to show you how to remove duplicate from array of object in javascript es6, es5.

How to remove duplicates in an array of objects javascript

There are 5 way to remove duplicates from an array of objects using new Set(), forEach() method, for loop, reduct(), filter() with findIndex() in javascript; as follow:

  • Remove duplicate objects from array in JavaScript Using new Set()
  • JavaScript remove duplicate objects array using for loop
  • Remove duplicate objects from array javascript using foreach
  • JavaScript remove duplicate objects from an array using filter
  • javascript remove duplicate objects from array using reduce

Let, you have array of object in javaScript. as follow:

    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"
    }
  ];

And want to remove duplicate from array of object; so you can use the following way for that; as follow:

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

Using the javaScript new set() method; you can remove the duplicate objects from an array in javascript; as follow:

    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 array using for loop

Using the for loop; you can remove duplicate objects from the javascript array; as shown 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"
    }
  ];
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'))

Remove duplicate objects from array javascript using foreach

Using the javascript forEach() method; you can remove the duplicate objects from an array in javascript; as shown 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"
    }
  ];
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 an array using filter

Using the JavaScript filter and findIndex(); you can remove the duplicate objects from an array in javascript; as shown 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"
    }
  ];
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 using reduce

Using javascript reduce() method; you can remove duplicate objects from an array using reduce; as shown 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"
    }
  ];
    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)

More JavaScript Tutorials

Recommended:-JavaScript Arrays
Recommended:-JavaScript Remove First and Last Element from Array
Recommended:-JavaScript Add and Remove Elements from Array
Recommended:-JavaScript Add Element to Beginning and Ending of Array
Recommended:-javaScript Push Array Into Array
Recommended:-Sort Array JavaScript
Recommended:-JavaScript Find Position of Element in Array
Recommended:-JavaScript Concat or Merge Array
Recommended:-How to Check If Object is Array in JavaScript
Recommended:-JavaScript Find Max and Min Value from an Array
Recommended:-JavaScript Find First Occurrence in Array
Recommended:-JavaScript Find First Element Position In Array
Recommended:-JavaScript Check if an Array Contains a Value
Recommended:-JavaScript: Array every() method
Recommended:-How To Check Array Item Using Array.Some() Method In JavaScript
Recommended:-JavaScript Array Reduce Method with Example
Recommended:-How to Use Array map() Method in JavaScript
Recommended:-JavaScript Array forEach – Loop Through an Array
Recommended:-JavaScript Convert Array to JSON Object
Recommended:-JavaScript Remove Duplicates From Array
Recommended:-JavaScript Multidimensional Array Push Pop
Recommended:-JavaScript Sum Array and Array Of Object
Recommended:-JavaScript Compare Two Arrays for Unmatched
Recommended:-JavaScript Compare Two Arrays for Matches
Recommended:-JavaScript Get Unique Values From Array
Recommended:-JavaScript Array Shift(), Unshift(), Push() and Pop() Methods
Recommended:-JavaScript Clone Array Method with Example
Recommended:-JavaScript Remove First, Last Element From Array

Leave a Comment