Adding up characteristics within an array of objects using Angular

Question

Adding up characteristics within an array of objects using Angular

As someone who is relatively new to Angular and Javascript, I am reaching out for some assistance. My goal is to calculate the sum and average of values within an object array. The objects are added to the array via input boxes, and here is the code I have developed so far:

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){

$scope.newLog = {};

$scope.logs = [
    {project: "", 
     phase: "", 
     date: "", 
     startTime: "", 
     intTime: "", 
     endTime: "", 
     comments: ""}
];

$scope.saveLog = function(){

    //CALCULATING DELTA TIME
    var newTimeLog = $scope.newLog;
    var begin = (newTimeLog.startTime).getTime();
    var end = (newTimeLog.endTime).getTime();

    var i = newTimeLog.intTime;
    var ii = parseInt(i);
    var intMilisec = ii*60000;

    if( isNaN(begin) )
        {
            return "";
        }

        if (begin < end) {
            var milisecDiff = end - begin;
        }else{
            var milisecDiff = begin - end;
        }

        var minusInt = milisecDiff - intMilisec;

        var milisec = parseInt((minusInt%1000)/100)
            , seconds = parseInt((minusInt/1000)%60)
            , minutes = parseInt((minusInt/(1000*60))%60)
            , hours = parseInt((minusInt/(1000*60*60))%24);

        hours = (hours < 10) ? "0" + hours : hours;
        minutes = (minutes < 10) ? "0" + minutes : minutes;
        seconds = (seconds < 10) ? "0" + seconds : seconds;

        var deltaFormat = hours + " Hours " + minutes + " Minutes";

    newTimeLog["deltaTime"] = deltaFormat;

    $scope.logs.push($scope.newLog);
    $scope.newLog = {};
};

$scope.intSum = function(){
    var sum = 0;
    for (var i = 0; i < $scope.logs.length; i++){
        sum += $scope.logs[i].intTime;
    }
    return sum;
};

});

The issue lies in the intSum function - where I aim to sum up the intTime properties of all the objects. For instance, if object1's intTime = 1, object2's intTime = 2, and object3's intTime = 3, the expected result from intSum should be 6. However, the current output from intSum is 123.

Any guidance on this matter would be highly appreciated!

javascript angularjs arrays object

Answer 1

Answer №1

Consider:

sum += parseInt($scope.logs[i].intTime);

As an alternative to:

sum += $scope.logs[i].intTime;

UPDATE: Exploring the implementation of the reduce function in JavaScript can provide a different approach to iterating over your array: https://www.w3schools.com/jsref/jsref_reduce.asp

UPDATE2: Make sure to initialize $scope.logs.intTime with "". The initial value being an empty string in the array may lead to generating NaN. I recommend initializing your array like this:

$scope.logs = [];

Answer 2

Consider:

sum += parseInt($scope.logs[i].intTime);

As an alternative to:

sum += $scope.logs[i].intTime;

UPDATE: Exploring the implementation of the reduce function in JavaScript can provide a different approach to iterating over your array: https://www.w3schools.com/jsref/jsref_reduce.asp

UPDATE2: Make sure to initialize $scope.logs.intTime with "". The initial value being an empty string in the array may lead to generating NaN. I recommend initializing your array like this:

$scope.logs = [];

Answer 3

Answer №2

The intTime variable is stored as a String within your object. This means that when you perform addition operations on it, it is treated as string concatenation instead of numerical addition. To correct this issue, convert the intTime value to a Number using the parseInt function before performing any sums.

Answer 4

The intTime variable is stored as a String within your object. This means that when you perform addition operations on it, it is treated as string concatenation instead of numerical addition. To correct this issue, convert the intTime value to a Number using the parseInt function before performing any sums.

Answer 5

Answer №3

Consider utilizing parseInt while calculating the sum+= operation:

$scope.intSum = function(){
    var sum = 0;
    for (var i = 0; i < $scope.logs.length; i++){
        sum += parseInt($scope.logs[i].intTime);
    }
    return sum;
};

Answer 6

Consider utilizing parseInt while calculating the sum+= operation:

$scope.intSum = function(){
    var sum = 0;
    for (var i = 0; i < $scope.logs.length; i++){
        sum += parseInt($scope.logs[i].intTime);
    }
    return sum;
};

Answer 7

Answer №4

To convert the intTime from a string to an integer, you can utilize JavaScript's reduce() function.

Here is how you can use the reduce() function in JavaScript:

```
arr.reduce(callback, [initialValue])
```

To define the callback function: function(accumulator, currentValue) { return accumulator + currentValue }

For a practical example and implementation, check out this code snippet: http://jsfiddle.net/GruffBunny/4cFU3/
- You can write your sum function like this:
```
$scope.sum = function(items, prop){ 
    return items.reduce(function(a, b){
        return a + parseInt(b[prop]); 
    }, 0);  
};
```
- You can then call the function using
```
$scope.sum($scope.logs, 'iniTime')
```
Here are some useful references for further reading:
- Mozilla Developer Network - Array Reduce
- Stack Overflow - Better way to sum a property value in an array (Using AngularJS)

Answer 8

To convert the intTime from a string to an integer, you can utilize JavaScript's reduce() function.

Here is how you can use the reduce() function in JavaScript:

```
arr.reduce(callback, [initialValue])
```

To define the callback function: function(accumulator, currentValue) { return accumulator + currentValue }

For a practical example and implementation, check out this code snippet: http://jsfiddle.net/GruffBunny/4cFU3/
- You can write your sum function like this:
```
$scope.sum = function(items, prop){ 
    return items.reduce(function(a, b){
        return a + parseInt(b[prop]); 
    }, 0);  
};
```
- You can then call the function using
```
$scope.sum($scope.logs, 'iniTime')
```
Here are some useful references for further reading:
- Mozilla Developer Network - Array Reduce
- Stack Overflow - Better way to sum a property value in an array (Using AngularJS)

Adding up characteristics within an array of objects using Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Retrieving a specific property from a SimpleXMLElement Object

In TypeScript, what is the method to specifically retrieve only resolved Promises while disregarding errors?

in JavaScript arrays, the identifier follows the numeric value right away

Displaying a Dynamic Loading Animation While Making an AJAX Call with jQuery

Issue encountered while attempting to load external JSON file from server in AngularJS

Activate the b-form-file function by selecting the b-button

Create a specific part of a webpage that can be scrolled through

Utilizing Electron and jQuery to incorporate a loading animated GIF into a newly opened window, where the animation pauses

What is the most efficient way to loop through a tree structure of interconnected objects and convert them into an array?

Numerous occurrences of directives and their accompanying events

The toggle function for the hamburger icon is currently malfunctioning

Attempt to retrieve node information using the useStaticQuery method in Gatsby

Can a C function be designed to handle both double and long double arguments simultaneously?

What steps are needed to implement Javascript functionality for a Carousel with Bootstrap 4?

How can you identify when an input value has been modified in Angular?

The textures in three.js material do not interact with lighting sources

jQuery failing to execute

Can I add the object to the DOM and hold off on executing any events until the next

Transferring information between Express and React through the Contentful API

Deleting identical string objects from two arrays or lists in Java