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

The .value property on the form group displays numeric values as either null or an empty string

Is there a way to adjust user privileges within a MenuItem?

include the ReactToastify.css file in your project using the import statement

Node.js route does not support io.sockets.on functionality

Guide to adding Angular 2 components to various locations in the DOM of a vanilla JavaScript webpage

What are the steps to secure an API endpoint using PassportJS?

Error encountered while attempting to define a method in a class component in React.js

Exploring the power of Angular 2 Directive scopes

Ways to retrieve a list of identifiers from arrays at both initial and subsequent levels

Establish a field alias with boundaries in AngularJS

What is the best way to organize properties within the Class Variance Authority?

Experiencing a problem with the JavaScript loading function

Avoiding JavaScript onclick event using JSON information

Refresh the page before the conclusion of the express-Node js function

What is the most effective method for obtaining only the "steamid" from an AJAX request (or any other method)?

What could be causing the issue with npm install packages not functioning properly?

Guide to modifying Button on fetch response in React Native

AngularJS integration with Bootstrap Confirmation jQuery plugin

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Trigger animation when the scroll position reaches 0.52 in Next.js using framer-motion