Analyzing the similarities in properties between two arrays of objects in order to generate a pair of fresh arrays

Question

Analyzing the similarities in properties between two arrays of objects in order to generate a pair of fresh arrays

I have two sets of data represented as arrays:

var oldOrder = [{"Id": "10","Qty": 1}, {"Id": "3","Qty": 2}, {"Id": "9","Qty": 2}]; 
var newOrder = [{"Id": "5","Qty": 2},{"Id": "10","Qty": 3}, {"Id": "9","Qty": 1}];

I want to merge these arrays into a new one, keeping only one object per Id. If an Id exists in both oldOrder and newOrder, I need to calculate the difference in Qty. For example, combining the above arrays would result in:

var newArray = [{"Id": "5","Qty": 2},{"Id": "10","Qty": 2}, {"Id": "9","Qty": -1}];

Additionally, I want to identify any dropped orders that are in oldOrder but not in newOrder:

var droppedOrders = [{"Id": "3","Qty": 2}];

I have a function to find dropped orders, but I need help incorporating the logic to create the newArray within the same function if possible:

function comparer(otherArray){
  return function(current){
    var onlyInOld = otherArray.filter(function(other){
      return other.Id == current.Id;
    }).length == 0;
    return onlyInOld;
  }
}

var droppedOrders= oldOrder.filter(comparer(newOrder));
console.log(droppedOrders);

It's worth noting that I am unable to use ES6 features like spread or fat arrow functions.

javascript arrays object

Answer 1

Answer №1

One simple way to achieve the desired outcome is by utilizing the Map feature.

1) Utilizing ES6

var oldOrder = [
  { Id: "10", Qty: 1 },
  { Id: "3", Qty: 2 },
  { Id: "9", Qty: 2 },
];
var newOrder = [
  { Id: "5", Qty: 2 },
  { Id: "10", Qty: 3 },
  { Id: "9", Qty: 1 },
];

const oldMap = new Map(oldOrder.map((o) => [o.Id, o]));
const newMap = new Map(newOrder.map((o) => [o.Id, o]));

const result = newOrder.map((o) =>
  oldMap.has(o.Id) ? { ...o, Qty: o.Qty - oldMap.get(o.Id).Qty } : o
);

const droppedOrders = oldOrder.filter(({ Id }) => !newMap.has(Id));

console.log(result);
console.log(droppedOrders);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

2) Utilizing ES5

var oldOrder = [
  { Id: "10", Qty: 1 },
  { Id: "3", Qty: 2 },
  { Id: "9", Qty: 2 },
];
var newOrder = [
  { Id: "5", Qty: 2 },
  { Id: "10", Qty: 3 },
  { Id: "9", Qty: 1 },
];

const oldMap = {};
const newMap = {};
oldOrder.forEach(function (o) {
  oldMap[o.Id] = o;
});
newOrder.forEach(function (o) {
  newMap[o.Id] = o;
});

const result = newOrder.map(function (o) {
  return oldMap[o.Id]
    ? Object.assign({}, o, { Qty: o.Qty - oldMap[o.Id].Qty })
    : o;
});

const droppedOrders = oldOrder.filter(function (o) {
  return !newMap[o.Id];
});

console.log(result);
console.log(droppedOrders);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

One simple way to achieve the desired outcome is by utilizing the Map feature.

1) Utilizing ES6

var oldOrder = [
  { Id: "10", Qty: 1 },
  { Id: "3", Qty: 2 },
  { Id: "9", Qty: 2 },
];
var newOrder = [
  { Id: "5", Qty: 2 },
  { Id: "10", Qty: 3 },
  { Id: "9", Qty: 1 },
];

const oldMap = new Map(oldOrder.map((o) => [o.Id, o]));
const newMap = new Map(newOrder.map((o) => [o.Id, o]));

const result = newOrder.map((o) =>
  oldMap.has(o.Id) ? { ...o, Qty: o.Qty - oldMap.get(o.Id).Qty } : o
);

const droppedOrders = oldOrder.filter(({ Id }) => !newMap.has(Id));

console.log(result);
console.log(droppedOrders);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

2) Utilizing ES5

var oldOrder = [
  { Id: "10", Qty: 1 },
  { Id: "3", Qty: 2 },
  { Id: "9", Qty: 2 },
];
var newOrder = [
  { Id: "5", Qty: 2 },
  { Id: "10", Qty: 3 },
  { Id: "9", Qty: 1 },
];

const oldMap = {};
const newMap = {};
oldOrder.forEach(function (o) {
  oldMap[o.Id] = o;
});
newOrder.forEach(function (o) {
  newMap[o.Id] = o;
});

const result = newOrder.map(function (o) {
  return oldMap[o.Id]
    ? Object.assign({}, o, { Qty: o.Qty - oldMap[o.Id].Qty })
    : o;
});

const droppedOrders = oldOrder.filter(function (o) {
  return !newMap[o.Id];
});

console.log(result);
console.log(droppedOrders);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Consider implementing Array.map and Array.filter

var initialOrders = [{ "Id": "10", "Qty": 1 }, { "Id": "3", "Qty": 2 }, { "Id": "9", "Qty": 2 }];
var updatedOrders = [{ "Id": "5", "Qty": 2 }, { "Id": "10", "Qty": 3 }, { "Id": "9", "Qty": 1 }];

const modifiedArray = updatedOrders.map((node) => {
  const nodeFromInitialOrders = initialOrders.find((item) => item.Id === node.Id);
  if (nodeFromInitialOrders) {
    return {
      Id: node.Id,
      Qty: nodeFromInitialOrders.Qty - node.Qty
    }
  } else {
    return node;
  }
});

const removedOrders = initialOrders.filter((item) => !modifiedArray.find(node => node.Id === item.Id))

console.log(modifiedArray);
console.log(removedOrders);

Answer 4

Consider implementing Array.map and Array.filter

var initialOrders = [{ "Id": "10", "Qty": 1 }, { "Id": "3", "Qty": 2 }, { "Id": "9", "Qty": 2 }];
var updatedOrders = [{ "Id": "5", "Qty": 2 }, { "Id": "10", "Qty": 3 }, { "Id": "9", "Qty": 1 }];

const modifiedArray = updatedOrders.map((node) => {
  const nodeFromInitialOrders = initialOrders.find((item) => item.Id === node.Id);
  if (nodeFromInitialOrders) {
    return {
      Id: node.Id,
      Qty: nodeFromInitialOrders.Qty - node.Qty
    }
  } else {
    return node;
  }
});

const removedOrders = initialOrders.filter((item) => !modifiedArray.find(node => node.Id === item.Id))

console.log(modifiedArray);
console.log(removedOrders);

Answer 5

Answer №3

To accomplish this task, one effective method is to organize the old and new order arrays by their Id values. Once these arrays are properly organized, you can easily utilize filtering and mapping techniques:

var oldOrder = [{"Id": "10","Qty": 1}, {"Id": "3","Qty": 2}, {"Id": "9","Qty": 2}]; 
var newOrder = [{"Id": "5","Qty": 2},{"Id": "10","Qty": 3}, {"Id": "9","Qty": 1}];
    
var keyedOldOrder = keyBy(oldOrder, 'Id');
var keyedNewOrder = keyBy(newOrder, 'Id');

var newArray = newOrder.map(function (entity) {
  var subtract = keyedOldOrder.hasOwnProperty(entity.Id)
    ? keyedOldOrder[entity.Id].Qty
    : 0;
  return Object.assign({}, entity, {
    Qty: entity.Qty - subtract
  });
});

var droppedOrders = oldOrder.filter(function (entity) {
  return !keyedNewOrder.hasOwnProperty(entity.Id);
});

console.log(newArray);
console.log(droppedOrders);

function keyBy(array, field)
{
  return array.reduce(function (carry, entity) {
    carry[entity[field]] = entity;
    return carry;
  }, {});
}

Answer 6

To accomplish this task, one effective method is to organize the old and new order arrays by their Id values. Once these arrays are properly organized, you can easily utilize filtering and mapping techniques:

var oldOrder = [{"Id": "10","Qty": 1}, {"Id": "3","Qty": 2}, {"Id": "9","Qty": 2}]; 
var newOrder = [{"Id": "5","Qty": 2},{"Id": "10","Qty": 3}, {"Id": "9","Qty": 1}];
    
var keyedOldOrder = keyBy(oldOrder, 'Id');
var keyedNewOrder = keyBy(newOrder, 'Id');

var newArray = newOrder.map(function (entity) {
  var subtract = keyedOldOrder.hasOwnProperty(entity.Id)
    ? keyedOldOrder[entity.Id].Qty
    : 0;
  return Object.assign({}, entity, {
    Qty: entity.Qty - subtract
  });
});

var droppedOrders = oldOrder.filter(function (entity) {
  return !keyedNewOrder.hasOwnProperty(entity.Id);
});

console.log(newArray);
console.log(droppedOrders);

function keyBy(array, field)
{
  return array.reduce(function (carry, entity) {
    carry[entity[field]] = entity;
    return carry;
  }, {});
}

Answer 7

Answer №4

You have the option to utilize a Map and execute a single loop for each array, then render the outcome to the desired target arrays.

const
    addToMap = (map, target) => ({ Id, Qty }) => map.set(Id, { target, Qty: Qty - (map.get(Id)?.Qty || 0) }),
    oldOrder = [{ Id: "10", Qty: 1 }, { Id: "3", Qty: 2 }, { Id: "9", Qty: 2 }],
    newOrder = [{ Id: "5", Qty: 2 }, { Id: "10", Qty: 3 }, { Id: "9", Qty: 1 }],
    map = new Map,
    orders = [],
    dropped = [];

oldOrder.forEach(addToMap(map, dropped));
newOrder.forEach(addToMap(map, orders));

map.forEach(({ target, Qty }, Id) => target.push({ Id, Qty }));

console.log(orders);
console.log(dropped);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Alternatively, you can implement an older Javascript approach by using an object instead of Map.

The logic behind the algorithm remains the same as described above.

const
    addToMap = function(map, target) {
        return function (o) {
            map[o.Id] = { target: target, Qty: o.Qty - (map[o.Id] && map[o.Id].Qty || 0) };
        };
    },
    oldOrder = [{ Id: "10", Qty: 1 }, { Id: "3", Qty: 2 }, { Id: "9", Qty: 2 }],
    newOrder = [{ Id: "5", Qty: 2 }, { Id: "10", Qty: 3 }, { Id: "9", Qty: 1 }],
    map = {},
    orders = [],
    dropped = [];

oldOrder.forEach(addToMap(map, dropped));
newOrder.forEach(addToMap(map, orders));

Object
    .keys(map)
    .forEach(function(Id) {
        map[Id].target.push({ Id: Id, Qty: map[Id].Qty });
    });

console.log(orders);
console.log(dropped);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 8

You have the option to utilize a Map and execute a single loop for each array, then render the outcome to the desired target arrays.

const
    addToMap = (map, target) => ({ Id, Qty }) => map.set(Id, { target, Qty: Qty - (map.get(Id)?.Qty || 0) }),
    oldOrder = [{ Id: "10", Qty: 1 }, { Id: "3", Qty: 2 }, { Id: "9", Qty: 2 }],
    newOrder = [{ Id: "5", Qty: 2 }, { Id: "10", Qty: 3 }, { Id: "9", Qty: 1 }],
    map = new Map,
    orders = [],
    dropped = [];

oldOrder.forEach(addToMap(map, dropped));
newOrder.forEach(addToMap(map, orders));

map.forEach(({ target, Qty }, Id) => target.push({ Id, Qty }));

console.log(orders);
console.log(dropped);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Alternatively, you can implement an older Javascript approach by using an object instead of Map.

The logic behind the algorithm remains the same as described above.

const
    addToMap = function(map, target) {
        return function (o) {
            map[o.Id] = { target: target, Qty: o.Qty - (map[o.Id] && map[o.Id].Qty || 0) };
        };
    },
    oldOrder = [{ Id: "10", Qty: 1 }, { Id: "3", Qty: 2 }, { Id: "9", Qty: 2 }],
    newOrder = [{ Id: "5", Qty: 2 }, { Id: "10", Qty: 3 }, { Id: "9", Qty: 1 }],
    map = {},
    orders = [],
    dropped = [];

oldOrder.forEach(addToMap(map, dropped));
newOrder.forEach(addToMap(map, orders));

Object
    .keys(map)
    .forEach(function(Id) {
        map[Id].target.push({ Id: Id, Qty: map[Id].Qty });
    });

console.log(orders);
console.log(dropped);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Analyzing the similarities in properties between two arrays of objects in order to generate a pair of fresh arrays

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing window.location.pathname in Next.js for precise targeting

By-passing Mistakes in Iteration in JavaScript

Is my data secure in Node.js RAM?

The configuration error occurred for the `get` action due to an unexpected response. Instead of an object, an array was received

Is there a way to assign a role to a user without requiring them to send a message beforehand?

How to refresh a page in React when the browser's back button is pressed

How can the data controller of a model be accessed within a directive that has been defined with "this"?

Can Angular retrieve the inner HTML content of an element?

Utilizing Vue.js to initiate a server request with vue-resource

In Node.js, use the `[]` operator to select elements from an array of strings without including

The PHP server is having trouble accepting a JavaScript object sent via AJAX

What are some strategies for enhancing the efficiency of asynchronous data retrieval and caching?

The Ionic AngularJS http service is failing to update the controller

Enhance your Django webpage with real-time updates using AJAX technology

Interactive JS chart for visually representing values within a preset range in Vue.js

Storing data in the browser's LocalStorage after a Vue3 component has

What are the drawbacks of setting data from computed properties?

Using ObjectIDs in MongoDB may be successful, however, it may not function properly in Mongoose

Achieving the retrieval of all data can be done simply by utilizing the `echo json_encode($data);

Having trouble creating a polygon from JSON in ESRI ArcGIS Javascript framework?