Can anyone provide guidance on how to calculate the total sum of a JavaScript array within an asynchronous function?

Question

Can anyone provide guidance on how to calculate the total sum of a JavaScript array within an asynchronous function?

Currently, I am working with Angularjs Protractor for end-to-end testing and faced an issue while trying to calculate the sum of values in a column. Although I am able to print out each value within the loop successfully, I am struggling to figure out how to add them all together. Whenever I attempt to return the total after the loop, it turns out to be undefined.

function getTotal() {
  ptor.findElements(protractor.By.className('col33')).then(function(promColCells) {
    var total;
    for (var i = 2; i < promColCells.length; i += 2) {
      promColCells[i].getText().then(function(promCellString) {
        total += parseFloat(promCellString);
      });
    }
    return total;
  });
};

javascript angularjs promise protractor angular-promise

Answer 1

Answer №1

The previous response (now removed) presented a good approach but with bulky and inaccurate promise code. Utilizing $q.all (equivalent to Promise.all in ES6-compliant promise implementations) is how we can effectively wait for an array of promises to finish:

function calculateTotal() {
    // this is where we continue
    return driver.findElements(webdriver.By.className('col33')).then(function(elements) {
        // waiting for all elements  
        return $q.all(elements.map(function(element){ return element.getText()}));
    }).then(function(elementTexts){
        return elementTexts.reduce(function(a,b){ return a + Number(b);},0);
    });
}

Alternatively, if you're not a fan of Array#reduce, you can sum using a for loop.

To use this function, it would look something like this:

calculateTotal().then(function(total){
    alert(total); // total value will be accessible here
});

Keep in mind, using an external promise library such as Bluebird allows you to write:

return Promise.cast(driver.findElements(webdriver.By.className('col33')))
    .map(function(element){ return element.getText(); })
    .reduce(function(a,b){ return a+Number(b); });

This results in a cleaner code structure.

Answer 2

The previous response (now removed) presented a good approach but with bulky and inaccurate promise code. Utilizing $q.all (equivalent to Promise.all in ES6-compliant promise implementations) is how we can effectively wait for an array of promises to finish:

function calculateTotal() {
    // this is where we continue
    return driver.findElements(webdriver.By.className('col33')).then(function(elements) {
        // waiting for all elements  
        return $q.all(elements.map(function(element){ return element.getText()}));
    }).then(function(elementTexts){
        return elementTexts.reduce(function(a,b){ return a + Number(b);},0);
    });
}

Alternatively, if you're not a fan of Array#reduce, you can sum using a for loop.

To use this function, it would look something like this:

calculateTotal().then(function(total){
    alert(total); // total value will be accessible here
});

Keep in mind, using an external promise library such as Bluebird allows you to write:

return Promise.cast(driver.findElements(webdriver.By.className('col33')))
    .map(function(element){ return element.getText(); })
    .reduce(function(a,b){ return a+Number(b); });

This results in a cleaner code structure.

Answer 3

Answer №2

Protractor comes with a built-in map function.

Here is a suggestion on how you can use it:

function calculateTotal() {
  // This is similar to using element.all(by.css('.col33')). It will return
  // a promise that resolves to an array of strings.
  return $$('.col33').map(function(cell) {
    return cell.getText();
  }).
  then(function(values) {
     // Values is an Array.<string>. Parse the integers and return the sum.
     var result = 0;
     values.forEach(function(val) {
       result += parseInt(val, 10);
     });
     return result;
  });
};

calculateTotal.then(function(total) {
});

Answer 4

Protractor comes with a built-in map function.

Here is a suggestion on how you can use it:

function calculateTotal() {
  // This is similar to using element.all(by.css('.col33')). It will return
  // a promise that resolves to an array of strings.
  return $$('.col33').map(function(cell) {
    return cell.getText();
  }).
  then(function(values) {
     // Values is an Array.<string>. Parse the integers and return the sum.
     var result = 0;
     values.forEach(function(val) {
       result += parseInt(val, 10);
     });
     return result;
  });
};

calculateTotal.then(function(total) {
});

Can anyone provide guidance on how to calculate the total sum of a JavaScript array within an asynchronous function?

Answer №1

Answer №2

Similar questions

Frustratingly Quiet S3 Upload Failures in Live Environment

How to Access Data Attribute in React TypeScript on Click Event

What does the curly braces {} signify in the JavaScript programming language

Distinguishing div identifiers for jQuery displaying and concealing

Can an Expression be incorporated into the ng-model Directive?

Accessing a key from an object dynamically in a React list and resolving key error issues in React

Having difficulty uploading a file using a formGroup

Switching back and forth between fluid text fields

Angular project icons not displaying in the browser

Ways to Export HTML to Document without any borders or colorful text

Parsing an Object in Java

Converting CSS code into JavaScript

What is the best method for installing a package specified as a peerDependency?

Update View Not Reflecting React State Increment

Modifying worldwide variables within an ajax request

Is it possible to use regex to replace all content between two dashes, including any new

What is the best way to use jQuery to set the height of one div equal to another div

Storing and Retrieving Multiple Data with localStorage

Restrict HTML Content in Json Result using PHP and Jquery

Using Vue to dynamically upload multiple files simultaneously