Issue with filtering of values returned by functions

Question

Issue with filtering of values returned by functions

I've been working with Angular's currency filter and I've run into an issue. It doesn't seem to be filtering the data that is returned from a function. I have a feeling that I might be missing something, perhaps it has to do with how the filter gets digested?

Here are some snippets of my code:

HTML template file

<span>total: {{ vm.total.exgst | currency}}<span>

Controller.js for the HTML template

var calculateTotalExGST = function() { return _.sum(vm.items, function(item)
                                                   { return item.cost; });
                                      };
vm.total = { exgst: calculateTotalExGST() };

Currently, the HTML displays

total: 5

But ideally, it should display as $5.00. The value is being returned by the function, but the currency filter doesn't seem to work. Could it be related to when $digest happens?

Can anyone provide any insights on this issue?

Edit: Just to provide more context about the code, vm.items are values coming from $state in ui-router.

I'm not sure how to replicate all of this in jsfiddler. So I've simply mocked $state. Unfortunately, I'm unable to reproduce my issue there.

https://jsfiddle.net/ex5rj9u7/

javascript angularjs angular-filters

Answer 1

Answer №1

It appears that the method you are using may not be correct in this context. According to the Lodash documentation, the sum function is typically used for arrays. You might want to consider using the sumBy method instead.

Here is an example for reference: https://jsfiddle.net/relferreira/dng7s3qs/

JavaScript:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;

  vm.items = [
    { cost: 5},
    { cost: 5}
  ];

    var calculateTotalExGST = function() { 
    return _.sumBy(vm.items, function(item){ 
        return item.cost; 
    });
  };

  console.log(calculateTotalExGST())

    vm.total = { exgst: calculateTotalExGST() };


}

HTML:

<div data-ng-app="app">

  <section ng-controller="MainController as mainVm">
    <span>total: {{ mainVm.total.exgst | currency}}</span>
  </section>

</div>

Answer 2

It appears that the method you are using may not be correct in this context. According to the Lodash documentation, the sum function is typically used for arrays. You might want to consider using the sumBy method instead.

Here is an example for reference: https://jsfiddle.net/relferreira/dng7s3qs/

JavaScript:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;

  vm.items = [
    { cost: 5},
    { cost: 5}
  ];

    var calculateTotalExGST = function() { 
    return _.sumBy(vm.items, function(item){ 
        return item.cost; 
    });
  };

  console.log(calculateTotalExGST())

    vm.total = { exgst: calculateTotalExGST() };


}

HTML:

<div data-ng-app="app">

  <section ng-controller="MainController as mainVm">
    <span>total: {{ mainVm.total.exgst | currency}}</span>
  </section>

</div>

Issue with filtering of values returned by functions

Answer №1

Similar questions

Is there a way to determine if a specific string matches a value within an object?

Issue-free AJAX call to Neo4j database on local server with no 'Access-Control-Allow-Origin' problem

React web app experiencing an issue with MUI Drawer opening flawlessly but failing to close

Problem with deleting or substituting symbols and character codes within a String

Render function in Next.js did not yield anything

Looking to notify the second set of JSON data arrays?

Issue in CakePHP after modifying the directory of Index

Switching from HTML to BBCode during the editing process

Send in the completed form with your chosen preferences

Tips for displaying personalized data with MUI DatePicker

Having trouble integrating Ionic Native API and Javascript API in one application?

Steps for adding information to an AngularJS scope

Navigate JSON Object - Prior Action

How to Use jQuery in Thymeleaf to Toggle All Checkboxes

Should I deploy the Angular2 demo app within Rails or as its own standalone application?

safely sending different form inputs in a Ruby on Rails form

Inexplicably, HighCharts flips its axis when exporting data

React version 18.2.0 and Next.js version 13 faced an issue with hydration failure due to the initial user interface not matching. This problem

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

Using Vue to create a component that binds an array as its data source