Remove duplicate objects from an array by a specified property using AngularJS

Question

Remove duplicate objects from an array by a specified property using AngularJS

I am managing an array called $scope.notys in my controller and using ng-repeat:

<li ng-repeat="x in notys" class="item js-item">
...

To add data to the array from my controller, I use this method:

$scope.notys.push(data);

Each piece of data includes a unique id property called data.id

The question I have is how can I update or replace an object where the id property matches with the last data.id received from an ajax call?

So basically, I need to follow these steps:

Retrieve data from the ajax call
With the new data.id, I need to check if there is already an object in $scope.notys with the same id
If an object with that id already exists, then replace it with the latest data. If not, simply add the new data by using push

javascript arrays angularjs

Answer 1

Answer №1

One approach to transform your array into key-value pairs (id-index) involves utilizing the array.reduce method. By establishing the id as a key, you can easily determine the corresponding index. This allows you to use array.splice with that index to replace the existing element with a new one.

var data = [{id:1, value:'apple'},{id:2, value:'banana'}]
var idIndexPair = data.reduce(function(result, entry){
  result[entry.id] = entry.value;
  return result;
}, {});

var newItem = {id:1, value: 'cherry'};
var positionOfExisting = idIndexPair[newItem.id];

if(positionOfExisting !== undefined) data.splice(positionOfExisting, 1, newItem);

document.write(JSON.stringify(data));

Answer 2

One approach to transform your array into key-value pairs (id-index) involves utilizing the array.reduce method. By establishing the id as a key, you can easily determine the corresponding index. This allows you to use array.splice with that index to replace the existing element with a new one.

var data = [{id:1, value:'apple'},{id:2, value:'banana'}]
var idIndexPair = data.reduce(function(result, entry){
  result[entry.id] = entry.value;
  return result;
}, {});

var newItem = {id:1, value: 'cherry'};
var positionOfExisting = idIndexPair[newItem.id];

if(positionOfExisting !== undefined) data.splice(positionOfExisting, 1, newItem);

document.write(JSON.stringify(data));

Answer 3

Answer №2

Here is a straightforward approach I discovered:

Using Angular's forEach method, I iterate through the $scope.notys array to find and remove any existing element with the same id as the data being passed in. Once removed, I then add the new data element to the array.

This process ensures that duplicate elements are avoided by first removing any potential duplicates before adding the new element.

Answer 4

Here is a straightforward approach I discovered:

Using Angular's forEach method, I iterate through the $scope.notys array to find and remove any existing element with the same id as the data being passed in. Once removed, I then add the new data element to the array.

This process ensures that duplicate elements are avoided by first removing any potential duplicates before adding the new element.

Remove duplicate objects from an array by a specified property using AngularJS

Answer №1

Answer №2

Similar questions

Sort through a list of objects using the criteria from a separate array

Exploring for duplicated elements in a two-dimensional array of integers

JavaScript and Node.JS tutorial: Pause execution until a folder is copied, then proceed to modify its files using asynchronous functions and await

Discover the position of a dynamically added element

The selected data is not being displayed

Exploring the seamless integration of Next.js, TypeScript, and useContext across

Incorporate variable key-value pairs into a JavaScript array or object

What could be causing my controller method in TypeScript to throw an error message unexpectedly?

Present information using Vue.js

Error encountered in React JS: Unexpected token in syntax

Receiving the result of a processed aspx page with a slight delay

Encountering difficulties when serving assets in Express.js?

The Ajax URL is failing to connect with the controller through IIS

Sending a notification alert directly to the client's web browser

Exploring User Authentication and Permissions in React and Node.js?

Babel Compile disrupts the flow of commands

Angular: Using ng-blur to toggle visibility between elements

Obtain the fabric js canvas object to enhance your designs

Navigating through JQuery

How can you add an error notification to a click on a protractor?