Loop through the information retrieved from the alertController

Question

Loop through the information retrieved from the alertController

I'm currently facing an issue regarding accessing data in my alert controller

let alert = this.alertCtrl.create({
  title: 'Edit Index',
  inputs:this.customIndexes,
  buttons:[
    {
      text: 'Cancel',
      role: 'cancel',
      handler: data=> {
        console.log('Cancel clicked');

      }
    },
    {
      text: 'Save',
      handler: data=>{
        console.log(data);
        /*for(let item of this.customIndexes)
        {
          this.customIndexes[item.name].value = data[item.name];
        }*/
        this.postEditedIndex(this.customIndexes);
      }
    }
  ]
});
alert.present();

When the user presses the save button, how can I retrieve the data?

My inputs are dynamic with the specified array structure like

customIndexes: { name: string, value: string, placeholder: string }[] = [];]

The function displays all fields that are populated into custom indexes, but how can I access them from the data object in the save button handler?

android typescript cordova ionic-framework

Answer 1

Answer №1

The issue you are encountering is related to the scoping of Object literals. To better understand this, take a look at this example: http://jsfiddle.net/1b68eLdr/76008/

class Test1 {
  name = "Name1";

  getName() {
    let test2 = {
      name: "Name2";
      getName2: ()=> {
        return this.name;
      }
    }
    return test2.getName2();
  }
};

let test1 = new Test1();
let name1 = test1.getName()

As a result, name1 will equal "Name2". This occurs because when you define a function within another object, it inherits that object's 'this' instead of the outer scope's 'this'. A common workaround for this is to store 'this' in a different variable (typically named self). For example: http://jsfiddle.net/5nup6cgx/

class Test1 {
  name = "Name1";

  getName() {
    let self = this; //<<<< NOTE HERE
    let test2 = {
      name: "Name2";
      getName2: ()=> {
        return self.name; //<<<< AND HERE
      }
    }
    return test2.getName2();
  }
};

let test1 = new Test1();
let name1 = test1.getName()

Therefore, what you likely intended to do was:

let self = this; //<<<<< NOTE HERE
let alert = this.alertCtrl.create({
  title: 'Edit Index',
  inputs:this.customIndexes,
  buttons:[
    {
      text: 'Cancel',
      role: 'cancel',
      handler: data=> {
        console.log('Cancel clicked');

      }
    },
    {
      text: 'Save',
      handler: data=>{
        console.log(data);
        for(let item of self.customIndexes)  //<<<<< AND HERE
        {
          self.customIndexes[item.name].value = data[item.name];  //<<<<< AND HERE
        }
        self.postEditedIndex(self.customIndexes);  //<<<<< AND HERE
      }
    }
  ]
});
alert.present();

Answer 2

The issue you are encountering is related to the scoping of Object literals. To better understand this, take a look at this example: http://jsfiddle.net/1b68eLdr/76008/

class Test1 {
  name = "Name1";

  getName() {
    let test2 = {
      name: "Name2";
      getName2: ()=> {
        return this.name;
      }
    }
    return test2.getName2();
  }
};

let test1 = new Test1();
let name1 = test1.getName()

As a result, name1 will equal "Name2". This occurs because when you define a function within another object, it inherits that object's 'this' instead of the outer scope's 'this'. A common workaround for this is to store 'this' in a different variable (typically named self). For example: http://jsfiddle.net/5nup6cgx/

class Test1 {
  name = "Name1";

  getName() {
    let self = this; //<<<< NOTE HERE
    let test2 = {
      name: "Name2";
      getName2: ()=> {
        return self.name; //<<<< AND HERE
      }
    }
    return test2.getName2();
  }
};

let test1 = new Test1();
let name1 = test1.getName()

Therefore, what you likely intended to do was:

let self = this; //<<<<< NOTE HERE
let alert = this.alertCtrl.create({
  title: 'Edit Index',
  inputs:this.customIndexes,
  buttons:[
    {
      text: 'Cancel',
      role: 'cancel',
      handler: data=> {
        console.log('Cancel clicked');

      }
    },
    {
      text: 'Save',
      handler: data=>{
        console.log(data);
        for(let item of self.customIndexes)  //<<<<< AND HERE
        {
          self.customIndexes[item.name].value = data[item.name];  //<<<<< AND HERE
        }
        self.postEditedIndex(self.customIndexes);  //<<<<< AND HERE
      }
    }
  ]
});
alert.present();

Loop through the information retrieved from the alertController

Answer №1

Similar questions

Issue Arising from Printing a Custom Instruction in a Schema Generated Document

The IDE is showing an error, but Jest is able to run it flawlessly

There are several InputBase elements nested within a FormControl

Excessive repetition in the style of writing for a function

A method for transferring information stored in chrome.storage to a variable within an Angular component

Issue with loading React Router custom props array but custom string works fine

Maintaining the consistent structure of build directories within a Docker container is crucial, especially when compiling TypeScript code that excludes the test

Discovering the data type from its textual representation

Cannot perform table inserts or creates with NestJS Sequelize functionality

Obtain information from a JSON file based on a specific field in Angular

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

Having trouble getting a constructor to function properly when passing a parameter in

The functionality of the String prototype is operational in web browsers, but it encounters issues

Tips for creating a deepCss selector for an input Textbox in Protractor

What is the method in Angular 6 that allows Observable to retrieve data from an Array?

Unleashing the Power of Firebase Service in Angular Components: A Guide to Effective Unit Testing

Unable to access the latitude property as it is undefined

Return a potential undefined output

How should JSON files stored on the server side be properly utilized in Next.js?

Unable to locate the type definition file for 'jquery'