Languages
[Edit]
EN

JavaScript - detect array items changes (added, updated, removed, unchanged)

10 points
Created by:
AnnLen
12780

In this short article, we would like to show how to detect changes in an array in JavaScript.

Added, updated, removed and unchanged items detection in array.
Added, updated, removed and unchanged items detection in array.

As changes, we understand to detect what item was added, updated, removed or unchanged.

Note: in the below example, it is necessary to indicate own functions that:

  • gets array item key - getKey(item) in the code,
  • compares array items to see the effect - compareItems(a, b) in the code.

Quick solution:

// ONLINE-RUNNER:browser;

function getKey(item) {
    return item.name;
}

function compareItems(a, b) {
    return a.name === b.name && a.value === b.value;
}

function mapItems(items) {
  	var map = {};
  	for (var i = 0; i < items.length; ++i) {
      	var item = items[i];
      	var key = getKey(item);
      	if (key in items) {
            throw new Error('Item key is duplicated (' + nkeyame + ').');
        }
      	map[key] = item;
    }
  	return map;
}

function detectChanges(currentItems, newItems) {
    var copiedItems = mapItems(currentItems);
    var addedItems = [];
    var updatedItems = [];
    var removedItems = [];
    var unchangedItems = [];
    for (var i = 0; i < newItems.length; ++i) {
        var newItem = newItems[i];
      	var itemKey = getKey(newItem);
        if (copiedItems.hasOwnProperty(itemKey)) {
            var copiedItem = copiedItems[itemKey];
            if (delete copiedItems[itemKey] && compareItems(copiedItem, newItem)) {
                unchangedItems.push(newItem);
            } else {
              	updatedItems.push(newItem);
            }
        } else {
            addedItems.push(newItem);
        }
    }
    for (var itemKey in copiedItems) {
      	if (copiedItems.hasOwnProperty(itemKey)) {
            removedItems.push(copiedItems[itemKey]);
        }
    }
    return {
        addedItems: addedItems,
        updatedItems: updatedItems,
        removedItems: removedItems,
        unchangedItems: unchangedItems
    };
}

// Usage example:

var currentItems = [
    {name: 'John',  value: 32}, // Unchanged
    {name: 'Kate',  value: 21}, // Updated
    {name: 'Matt',  value: 26}, // Removed
    {name: 'Greg',  value: 24}  // Unchanged
];

var newItems = [
    {name: 'John',  value: 32}, // Unchanged
    {name: 'Kate',  value: 25}, // Updated
    {name: 'Chris', value: 40}, // Added
    {name: 'Greg',  value: 24}  // Unchanged
];

var detectedChanges = detectChanges(currentItems, newItems);

console.log('Added items: '     + JSON.stringify(detectedChanges.addedItems,     null, 4));
console.log('Updated items: '   + JSON.stringify(detectedChanges.updatedItems,   null, 4));
console.log('Removed items: '   + JSON.stringify(detectedChanges.removedItems,   null, 4));
console.log('Unchanged items: ' + JSON.stringify(detectedChanges.unchangedItems, null, 4));
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join