Cannot access a Typescript method variable within an inline function

Question

Cannot access a Typescript method variable within an inline function

I've encountered an issue with my code involving loading values into the array usageCategory within an inline function. Despite successfully adding values to the array inside the function, I am unable to print them outside it.

getAllUsageCategoryElements(){

        var usageCategory: string[] =  [];

        var that=this;

        // Extracting all droplist elements to validate from another page
        this.addAdditionalCostDialogue.usageCategoryDropListContainer.all(by.tagName('li')).all(by.tagName("span")).each(function (element, index) {
            element.getText().then(function (text){

                 //console.log("printing directly " + text);
                // The above log statement works fine but pushing value to the array doesn't

                that.usageCategory.push(text);
            })
        });

        console.log("Size of the array is " + usageCategory.length);

        usageCategory.forEach(element => {
            console.log("Printing text " + element);
        });
    }

How can I resolve this issue and access the array values outside the inline function? Any assistance would be greatly appreciated.

javascript typescript variables scope protractor

Answer 1

Answer №1

Learn how to use ElementArrayFinder.prototype.map

If you're looking to convert an ElementArrayFinder object into a list of objects that you create, consider using the .map function. This handy method allows you to easily transform your elements. For more details, check out the documentation at http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.map. In the example provided by Protractor, the map function returns a list of objects. For your specific scenario, make sure to await the text of the element and return it within the map callback function.

async getAllUsageCategoryElements() {
    // Extract all droplist elements and store them in an array for validation.
    const spans = this.addAdditionalCostDialogue.usageCategoryDropListContainer
        .all(by.tagName('li')).all(by.tagName("span"));
    // Use map on the ElementArrayFinder to obtain a list of strings
    const usageCategories = await spans.map(async (el) => {
      const text = await el.getText();
      // console.log(`printing directly ${text}`);
      return text;
    });

    console.log("Size of the array is " + usageCategories.length);
    for (let usageCategory of usageCategories) {
      console.log(`printing text ${usageCategory}`);
    }
}

Answer 2

Learn how to use ElementArrayFinder.prototype.map

If you're looking to convert an ElementArrayFinder object into a list of objects that you create, consider using the .map function. This handy method allows you to easily transform your elements. For more details, check out the documentation at http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.map. In the example provided by Protractor, the map function returns a list of objects. For your specific scenario, make sure to await the text of the element and return it within the map callback function.

async getAllUsageCategoryElements() {
    // Extract all droplist elements and store them in an array for validation.
    const spans = this.addAdditionalCostDialogue.usageCategoryDropListContainer
        .all(by.tagName('li')).all(by.tagName("span"));
    // Use map on the ElementArrayFinder to obtain a list of strings
    const usageCategories = await spans.map(async (el) => {
      const text = await el.getText();
      // console.log(`printing directly ${text}`);
      return text;
    });

    console.log("Size of the array is " + usageCategories.length);
    for (let usageCategory of usageCategories) {
      console.log(`printing text ${usageCategory}`);
    }
}

Answer 3

Answer №2

There are a couple of issues in the code you provided:

1) The variable usageCategory is defined as a local variable, not as a property of the function getAllUsageCategoryElements. Therefore, you should use usageCategory.push(text); instead of that.usageCategory.push(text);.

2) The method getText() is asynchronous, meaning that any synchronous code following it will be executed before the result of getText() is available. To ensure the correct order of execution, you should place the synchronous code inside a then() block after the getText() call.

console.log("Size of the array is " + usageCategories.length);
for (let usageCategory of usageCategories) {
  console.log(`printing text ${usageCategory}`);
}

Here's the corrected version of the code:

getAllUsageCategoryElements(){

    var usageCategory: string[] =  [];


    // Extract all droplist elements and store them in an array for validation.
    this.addAdditionalCostDialogue
        .usageCategoryDropListContainer
        .all(by.tagName('li'))
        .all(by.tagName("span"))
        .each(function (element, index) {

            element.getText().then(function (text){
                usageCategory.push(text);
            })
    })

    .then(function(){

        console.log("Size of the array is " + usageCategory.length);

        usageCategory.forEach(element => {
            console.log("Printing text " + element);
        }); 

        return usageCategory;
    });

}

Answer 4

There are a couple of issues in the code you provided:

1) The variable usageCategory is defined as a local variable, not as a property of the function getAllUsageCategoryElements. Therefore, you should use usageCategory.push(text); instead of that.usageCategory.push(text);.

2) The method getText() is asynchronous, meaning that any synchronous code following it will be executed before the result of getText() is available. To ensure the correct order of execution, you should place the synchronous code inside a then() block after the getText() call.

console.log("Size of the array is " + usageCategories.length);
for (let usageCategory of usageCategories) {
  console.log(`printing text ${usageCategory}`);
}

Here's the corrected version of the code:

getAllUsageCategoryElements(){

    var usageCategory: string[] =  [];


    // Extract all droplist elements and store them in an array for validation.
    this.addAdditionalCostDialogue
        .usageCategoryDropListContainer
        .all(by.tagName('li'))
        .all(by.tagName("span"))
        .each(function (element, index) {

            element.getText().then(function (text){
                usageCategory.push(text);
            })
    })

    .then(function(){

        console.log("Size of the array is " + usageCategory.length);

        usageCategory.forEach(element => {
            console.log("Printing text " + element);
        }); 

        return usageCategory;
    });

}

Cannot access a Typescript method variable within an inline function

Answer №1

Learn how to use ElementArrayFinder.prototype.map

Answer №2

Similar questions

Trouble initializing Google Maps in an Angular directive

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

Sleek dialog sliding animation with Svelte

Error receiving by React while updating an array with setState() in TypeScript

TypeScript PatchBaseline with AWS CDK

What is the best method for extracting html-string from html-string across different browsers?

How can I retrieve a certain type of object property in TypeScript?

Eliminate incorrect or invalid state when resetting a dropdown in an Angular ng-select component

Generate a key pair using the cryto library and then use it with the json

How do you trigger the playback of a specific audio file when a user clicks on it?

The error code TS2345 indicates that the argument type 'Event' cannot be assigned to a parameter type 'string'

Leveraging shadow components with the Next.js pages directory

Listening to multiple events in AngularJS using `$scope.$on`

inserting a dynamic variable into a JSON string

What is the most efficient way to execute useEffect when only one specific dependency changes among multiple dependencies?

How can I transform the overall value into a percentage in Vue.js or JavaScript?

Error: n.indexOf function is not defined - Issue with Firebase

The click event for getelementbyid() function is malfunctioning

What is the process for including or excluding a class from a horizontal scrollbar?

When using angularjs, the $window.location.href may cause the page to load without any