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

`Is there a way for Javascript to retrieve information sent from Python Flask's render_template() method?`

Exploring the Differences Between Next.js Script Components and Regular Script Tags with async and defer Attributes

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Maintaining the dropdown in the open position after choosing a dropdown item

"Implementing a dynamic way to assign values to different item types in React

Session Redirect Error in Express.js

Choosing various choices using AngularJS

Is it possible to incorporate a label within a dropdown menu (<select>)?

Combining the elements within an array of integers

How exactly does the 'this' type in TypeScript determine its own type inferences?

Searching for values within an array of objects by iterating through nested arrays to apply a filter

Angular JS Introductory Module

Retrieving Data from a JSON File in ASP.NET MVC 4

Causes of the error message 'TypeError: res.render is not a function'

Utilizing node.js for manipulating files (JSON) through reading and writing operations

Fetching the second item within an object using JavaScript

Receive a warning in the Heroku log stating "(node) sys is outdated. Util should be used instead" while the script is executed

Is there a way to display a div element just once in AngularJS?

Avoid potential issues caused by cancelled asynchronous requests affecting the application's status by using the watchEffect() function

I am looking to view all products that belong to the category with the ID specified in the request, and have red-colored stocks