Adding property values based on another property in JavaScript

Question

Adding property values based on another property in JavaScript

My current object looks something like this:

[
  {
    origin: "XX",
    destination: "YY",
    volume: 500
  },
  {
    origin: "ZZ",
    destination: "YY",
    volume: 500
  }
]

I am looking to use map and reduce functions to sum up the volumes based on a specific property, in this case, the destination.

The desired output should be:

 [
   {
     destination: "YY",
     volume: 1000
   }
]

Appreciate your help with this, thank you.

javascript typescript

Answer 1

Answer №1

When attempting to group the array based on the destination property, you can utilize a versatile groupBy function in TypeScript. This function constructs a Map (compatible with ES2015 or newer) mapping destination values to arrays of objects sharing that specific value for destination:

function groupBy<T, K extends keyof T>(key: K, arr: T[]): Map<T[K], T[]> {
  const map = new Map<T[K], T[]>();
  arr.forEach(t => {
    if (!map.has(t[key])) {
      map.set(t[key], []);
    }
    map.get(t[key])!.push(t);
  })
  return map;
}

Next, taking into consideration your provided input:

const input = [
  {
    origin: "XX",
    destination: "YY",
    volume: 500
  },
  {
    origin: "ZZ",
    destination: "YY",
    volume: 500
  }
]

You can transform the array entries from the grouped Map into an array of objects that contains the grouped destination and calculates the sum of volume for each specified group:

const output = Array.from(groupBy("destination", input).entries())
  .map(([dest, objs]) => ({
    destination: dest,
    volume: objs.reduce((acc, cur) => acc + cur.volume, 0)
  }))

console.log(JSON.stringify(output)); // generates the desired result

May this solution assist you in your endeavors! Best of luck!

I have successfully tested this code snippet in the TypeScript Playground using v2.5.1 as per the current date. Feel free to explore it further by visiting here.

Answer 2

When attempting to group the array based on the destination property, you can utilize a versatile groupBy function in TypeScript. This function constructs a Map (compatible with ES2015 or newer) mapping destination values to arrays of objects sharing that specific value for destination:

function groupBy<T, K extends keyof T>(key: K, arr: T[]): Map<T[K], T[]> {
  const map = new Map<T[K], T[]>();
  arr.forEach(t => {
    if (!map.has(t[key])) {
      map.set(t[key], []);
    }
    map.get(t[key])!.push(t);
  })
  return map;
}

Next, taking into consideration your provided input:

const input = [
  {
    origin: "XX",
    destination: "YY",
    volume: 500
  },
  {
    origin: "ZZ",
    destination: "YY",
    volume: 500
  }
]

You can transform the array entries from the grouped Map into an array of objects that contains the grouped destination and calculates the sum of volume for each specified group:

const output = Array.from(groupBy("destination", input).entries())
  .map(([dest, objs]) => ({
    destination: dest,
    volume: objs.reduce((acc, cur) => acc + cur.volume, 0)
  }))

console.log(JSON.stringify(output)); // generates the desired result

May this solution assist you in your endeavors! Best of luck!

I have successfully tested this code snippet in the TypeScript Playground using v2.5.1 as per the current date. Feel free to explore it further by visiting here.

Answer 3

Answer №2

Give this a shot:

var data = [{
    origin: "AA",
    destination: "BB",
    volume: 300
  },
  {
    origin: "CC",
    destination: "BB",
    volume: 600
  }
];

function totalVolume(arr, propType, propVal) {
  var sum = 0;
  arr.forEach(function(item) {
    if (item[propType] && item[propType] === propVal) {
      sum += item.volume;
    }
  });
  console.log({
    [propType]: propVal,
    volume: sum
  });
}

totalVolume(data, "destination", "BB");

Answer 4

Give this a shot:

var data = [{
    origin: "AA",
    destination: "BB",
    volume: 300
  },
  {
    origin: "CC",
    destination: "BB",
    volume: 600
  }
];

function totalVolume(arr, propType, propVal) {
  var sum = 0;
  arr.forEach(function(item) {
    if (item[propType] && item[propType] === propVal) {
      sum += item.volume;
    }
  });
  console.log({
    [propType]: propVal,
    volume: sum
  });
}

totalVolume(data, "destination", "BB");

Answer 5

Answer №3

By utilizing the power of Array.reduce, it is possible to create a universal collector method that is independent of any specific data structure. This method relies on the first collector or accumulator argument to handle data structure-specific getter and setter functions necessary for manipulating the data.

To properly execute the provided example code, an implementation may resemble the following...

var dataList = [{
    origin: "XX",
    destination: "YY",
    volume: 500
}, {
    origin: "ZZ",
    destination: "YY",
    volume: 500
}, {
    origin: "XX",
    destination: "AA",
    volume: 200
}, {
    origin: "ZZ",
    destination: "AA",
    volume: 100
}];

function collectSourceValueConnectedTargetSummaries(collector, dataItem) {
    var registry = collector.registry;
    var sourceValue = collector.getSourceValue(dataItem);
    var summaryItem = registry[sourceValue];

    if (!summaryItem) {
        summaryItem = registry[sourceValue] = Object.assign({}, collector.summaryItem);

        collector.putSummarySource(summaryItem, sourceValue);
        collector.summaryList.push(summaryItem);
    }
    collector.summarizeTarget(summaryItem, collector.getTargetValue(dataItem));

    return collector;
}

var result = dataList.reduce(collectSourceValueConnectedTargetSummaries, {
    registry: {},
    getSourceValue: function(dataItem) { return dataItem.destination },
    getTargetValue: function(dataItem) { return dataItem.volume },
    putSummarySource: function(summaryItem, value) { summaryItem.destination = value; },
    summarizeTarget: function(summaryItem, value) { summaryItem.volume = (summaryItem.volume + value); },
    summaryItem: {volume: 0},
    summaryList: []
}).summaryList;

console.log('dataList : ', dataList);
console.log('reduced dataList / result : ', result);

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

Answer 6

By utilizing the power of Array.reduce, it is possible to create a universal collector method that is independent of any specific data structure. This method relies on the first collector or accumulator argument to handle data structure-specific getter and setter functions necessary for manipulating the data.

To properly execute the provided example code, an implementation may resemble the following...

var dataList = [{
    origin: "XX",
    destination: "YY",
    volume: 500
}, {
    origin: "ZZ",
    destination: "YY",
    volume: 500
}, {
    origin: "XX",
    destination: "AA",
    volume: 200
}, {
    origin: "ZZ",
    destination: "AA",
    volume: 100
}];

function collectSourceValueConnectedTargetSummaries(collector, dataItem) {
    var registry = collector.registry;
    var sourceValue = collector.getSourceValue(dataItem);
    var summaryItem = registry[sourceValue];

    if (!summaryItem) {
        summaryItem = registry[sourceValue] = Object.assign({}, collector.summaryItem);

        collector.putSummarySource(summaryItem, sourceValue);
        collector.summaryList.push(summaryItem);
    }
    collector.summarizeTarget(summaryItem, collector.getTargetValue(dataItem));

    return collector;
}

var result = dataList.reduce(collectSourceValueConnectedTargetSummaries, {
    registry: {},
    getSourceValue: function(dataItem) { return dataItem.destination },
    getTargetValue: function(dataItem) { return dataItem.volume },
    putSummarySource: function(summaryItem, value) { summaryItem.destination = value; },
    summarizeTarget: function(summaryItem, value) { summaryItem.volume = (summaryItem.volume + value); },
    summaryItem: {volume: 0},
    summaryList: []
}).summaryList;

console.log('dataList : ', dataList);
console.log('reduced dataList / result : ', result);

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

Adding property values based on another property in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Issue with create-react-app and express server not displaying correctly in Internet Explorer

Using JavaScript to execute a PHP function for updating or inserting data into an SQL database

How can I incorporate a fade opacity effect into my Div scrolling feature?

Is it possible to set a different default page index other than 0 in a material table using reactjs?

Eliminating bottom section in HTML/CSS

Error: Unable to locate module: cannot find './node_modules/@material-ui/core/IconButton'

Using TypeScript with CanvasJS

Insufficient attributes in TypeScript component for React application

Express Node.js Error: Address Information Syntax Issue

Node.js VAR DeclarationIn the world of Node.js, we make

Error encountered: "Unable to locate module 'typescript-Collections' when modifying the module to "umd" or "amd" in the tsconfig.json file."

AngularJS: Implementing WebSocket Reconnection Logic within a Service

What is the reason for converting arrays to strings when making requests, but not objects?

Accessing HTML partials from separate domains using AngularJS

Experiencing "localhost redirect loop due to NextJS Middleware" error

Error: The code is trying to access the property 'string' of an undefined variable. To fix this issue, make sure to

Combining JSON and JavaScript for embedding a SPARQL query into an HTML document

Leveraging x-template in VueJS to create a sub-component within a larger component

Retrieve information from XML using jQuery

Breadcrumb navigation that is determined by data hierarchies and relationships between parent and child items