When using Lodash, it will successfully operate on two objects but will yield a null value if presented

Question

When using Lodash, it will successfully operate on two objects but will yield a null value if presented

Check out this interesting plunker I have here...

I've noticed that when the 3rd item is deleted from the original, the calculation for total_expenses comes out as 23196. However, when the third object is included, total_expenses returns null. Is there something in my code that I might be overlooking?

The function total_expenses() utilizes _.reduce to sum up the values of a specific attribute across the collection.

$scope.loan.total_expenses = _.reduce(original, function(obj){
    var grand = 0;
    grand += obj.cost;
    return grand;
});

javascript angularjs lodash

Answer 1

Answer №1

Your implementation of the reduce function seems to have an issue. To properly use reduce for summing values, make sure to provide an initial value as the third argument and return the incremented value in each step of the callback. Here's the correct code:

$scope.total = _.reduce(data, function(previousValue, currentValue) {
  previousValue += currentValue.amount;
  return previousValue;
}, 0);

In your scenario, with three objects in the array, the reduce callback will be executed three times:

previousValue starts at 0, currentValue is data[0] => previousValue becomes data[0].amount.
previousValue is now data[0].amount, currentValue is data[1] => previousValue updates to previousValue + data[1].amount, which is data[0].amount + data[1].amount.
and so on.

Check out the demo: http://example.com/demo

Answer 2

Your implementation of the reduce function seems to have an issue. To properly use reduce for summing values, make sure to provide an initial value as the third argument and return the incremented value in each step of the callback. Here's the correct code:

$scope.total = _.reduce(data, function(previousValue, currentValue) {
  previousValue += currentValue.amount;
  return previousValue;
}, 0);

In your scenario, with three objects in the array, the reduce callback will be executed three times:

previousValue starts at 0, currentValue is data[0] => previousValue becomes data[0].amount.
previousValue is now data[0].amount, currentValue is data[1] => previousValue updates to previousValue + data[1].amount, which is data[0].amount + data[1].amount.
and so on.

Check out the demo: http://example.com/demo

Answer 3

Answer №2

When looking at the _.reduce function in the documentation, it specifies that the callback is bound to thisArg and invoked with four arguments: (accumulator, value, index|key, collection).

The first parameter of the _.reduce callback serves as the accumulator or sum value. This accumulated result is based on the return statement within the callback function. Initially, when the callback is triggered for the first time, it returns a number labeled as grand. Consequently, this number becomes the obj parameter during the subsequent iteration. However, this may not align with your intended outcome.

Since a number lacks a cost property, there arises an issue where you are essentially adding undefined to the initial number—leading to a resulting value of NaN (Not a Number).

Here is an example that should work (although @dfsq's version may be more preferable):

$scope.loan.total_expenses = _.reduce(_.pluck(original, 'cost'), function(sum, cost){
      return cost + sum;
    });

For further reference, check out the Updated Plunker.

Answer 4

When looking at the _.reduce function in the documentation, it specifies that the callback is bound to thisArg and invoked with four arguments: (accumulator, value, index|key, collection).

The first parameter of the _.reduce callback serves as the accumulator or sum value. This accumulated result is based on the return statement within the callback function. Initially, when the callback is triggered for the first time, it returns a number labeled as grand. Consequently, this number becomes the obj parameter during the subsequent iteration. However, this may not align with your intended outcome.

Since a number lacks a cost property, there arises an issue where you are essentially adding undefined to the initial number—leading to a resulting value of NaN (Not a Number).

Here is an example that should work (although @dfsq's version may be more preferable):

$scope.loan.total_expenses = _.reduce(_.pluck(original, 'cost'), function(sum, cost){
      return cost + sum;
    });

For further reference, check out the Updated Plunker.

When using Lodash, it will successfully operate on two objects but will yield a null value if presented

Answer №1

Check out the demo: http://example.com/demo

Answer №2

Similar questions

I'm having trouble using Vueitify and the router - whenever I try to change components with Vue router, the URL updates but the component remains

Tips for resolving the strange behavior on a webpage with multiple active buttons labeled "portfolio"

What is the best way to display audio files for clients using a combination of Node.js and AngularJS?

Issue with Wicket: unable to generate sound for resource paths

Update your selection to ui-select and incorporate ngRepeat filters

"Insufficient rendering in three.js for all meshes to be displayed

Next.js React Hydration Issue - "Anticipated a corresponding <a> within the server HTML <a>"

Suitability Criteria Matching Algorithm

Updating information within an ArcGIS Service using REST and JSON using jQuery/JavaScript

What is the best way to manage feedback on various posts?

Searching for hidden elements within a div using a filter option

Adding static files to your HTML page with node.js

Tips for updating the display by fetching data from a database through a websocket

What is the process for importing specific modules from jQuery?

Display or conceal elements depending on the values that have been toggled

How to enable the Copy to Clipboard feature for multiple buttons and transition from using an ID to a class identifier

Determine in JavaScript if one date occurs exactly one week after another date

"Troubleshooting a malfunctioning PHP contact form that is not functioning properly

Unable to resize div element using the change size function

What is the best way to invoke the update() and ScrollTop() methods in Angular for ngx-perfect-scrollbar?