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

How to separate rows in GridView with a divider

An issue occurred in the modal window following the relocation of project files

Nested forwardRef in React is a powerful feature that allows

What is the best way to transform this JSON into a Java object for an Android application?

Error with Chakra UI and React Hook Form mismatched data types

A versatile function catered to handling two distinct interface types within Typescript

Is there a way to detect changes in a Service variable within an Angular component?

What are the reasons for deprecating bindToController in Typescript?

What is the process for retrieving an element from component interaction?

Slow scrolling issue in Recyclerview

How to declare and initialize a variable in Angular 2 using TypeScript

How come JavaScript variables are able to persist on JQuery Mobile multi-page templates on desktop browsers, but not on mobile browsers?

typescript's JSON.stringify function includes internal fields but omits public interface values

Problem with Change Detection in Angular 2

Tips for tracking the evolution of changes to an array within React State

Crafting a template for mixing up images and quotes without any specific connection - here's how!

"Encountering issues with the functionality of two Angular5 routers

Tips for assigning a numerical value to an array and showcasing it in a listview

Invoke index functions within a component

Jasmine Destiny - Error Encountered: macroTask 'setTimeout': unable to switch to 'active' state, expecting 'planned' state, but it was 'notScheduled'