Creating number inputs in Ionic 2/3 using alerts

I am currently working with Ionic 3.x on my macOS system.

The issue I am facing is as follows:

I have an array that contains a number and another array consisting of names.

table: { number: number, names: string[] } = {
    number: 0,
    names: ['']
  };

My goal is to allow the user to input a number to set within the array. In my search for a solution, I came across the AlertController.

To address this requirement, I have created the following function to handle adding a number:

addTable(){

    let prompt = this.alertCtrl.create({
      title: 'Add Table',
      subTitle: 'Enter the table number',
      inputs: [{
        name: 'tableNumber',
        placeholder: 'Number',
        type: 'number'
      }],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Add',
          handler: data => {
            //this.tables.push(data);
            this.table.number = data;
          }
        }
      ]
    });

    prompt.present();

  }

However, I am encountering an issue where setting table.number results in [object]. Even when trying to convert it using +data, the value becomes NaN. Additionally, the push method does not yield the desired outcome either.

Could you please provide guidance on how to effectively assign the user-inputted number to table.number?

Answer №1

The input's designated name

name: 'tableNumber'

is included as a property in the final object. You can retrieve it using the following method:

handler: data => {
    this.table.number = data.tableNumber;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The SunEditor onChange event does not reflect updated state information

software version next: 12.0.7 suneditor: 2.41.3 suneditor-react: 3.3.1 const SunEditor = dynamic(() => import("suneditor-react"), { ssr: false, }); import "suneditor/dist/css/suneditor.min.css"; // Import Sun Editor's CSS Fi ...

How can I make arrays of a specific length and populate them in JavaScript?

For instance: I have over 100 locations in a single array, each with latitude and longitude values. I need to use these locations with the Google distance matrix API to find nearby shops for my users. The issue is that this API can only handle 25 destinat ...

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

Having trouble assigning more than one custom named property in TypeScript for MUI v5 Palette

I am currently setting up multiple custom attributes to make future updates easier. Nonetheless, I'm encountering a challenge with implementing more than one custom property in MUI v5. TypeScript Error TS2717: Subsequent property declarations must hav ...

Determine the data type of a variable in TypeScript by utilizing the compiler API

I am facing an issue with retrieving the type of a variable using the compiler API. Here is some background information on my situation: Since I execute everything in memory, I have had to create my own compiler host. This is necessary because the typechec ...

What is the easiest method to transform an input[type=file] into a base64 string in a Vue application using JavaScript?

I am looking to create a base64 string using an input type=file in order to store only the base64 string and make managing images in a database easier. This approach makes it simpler for me to work with just JSON. Here is what I have in my Vue server (u ...

Unable to find solutions for all parameters in AnalysisComponent: ([object Object], ?, ?, [

As a newcomer to the Angular framework, I encountered an issue when adding project services. Error: Can't resolve all parameters for AnalysisComponent: ([object Object], ?, ?, [object Object], [object Object], [object Object], [object Object], [obj ...

Sorting character values in TypeScript using ascending and descending order in a JSON array

In my dataset of homes, I have the following information: var homes = [ { "h_id": "3","city": "Dallas","state": "YYYY","zip": "75201","price": "162500" }, { "h_id": "4","city": "CA","state": "ZZZZ","zip": "90210","price": "319250" }, { "h ...

Event-Propagation in Angular 5 with mat-expansion-panel within another component

In my project, I am facing a challenge where I need to create multiple mat-expansion-panels within one mat-expansion-panel. Everything works fine except for the issue that when I try to open a child-panel, it triggers the close-event of the parent-panel. ...

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

I am defining an enumeration called ApiFunctions with values like "HIDE", "SET_READ_ONLY", and "DESCRIPTION". Also, I have a type ValueOfApiFunction that should include all values of ApiFunctions. Additionally, I have a logic that listens for messages on ...

Accessing JSON object from a URL via a web API using Angular 2 and TypeScript

`Hello, I am in need of some assistance in retrieving JSON data from a web API using Visual Studio 2015 .net Core, Angular 2 & Typescript. The Angular2 folders are located in /wwwroot/libs. Currently, I am utilizing Angular 2's http.get() method. Ho ...

Translate Typescript into Javascript for use in React applications

Can anyone assist me in converting this Typescript code to Javascript? function ImageMagnifier({ src, width, height, magnifierHeight = 100, magnifieWidth = 100, zoomLevel = 1.5 }: { src: string; width?: string; height?: string; magnifie ...

What is the reason behind the file not found error encountered when running Deno with the command "echo hello"?

Exploring Deno's standard library, I encountered an issue with Deno.run - a function designed to create a new subprocess. Here is the example provided in the documentation: const p = Deno.run({ cmd: ["echo", "hello"], }); When I attempt to run ...

Is it possible to use TypeScript in a React Native project with a JavaScript file?

Currently, I am learning React Native by working on app clones like Instagram and YouTube. I have recently started an AirBnb clone project, but I'm facing some issues with the initial build. One issue I noticed is that in 'App.js', the temp ...

Is there a way to organize an array of elements into three columns using PHP?

My array of menu items is being displayed on the screen in 3 columns, but I want them to appear differently without altering the HTML structure. Currently, they are listed like this: 1 2 3 4 5 6 7 8 9 I would like them to display as follows: 1 4 7 ...

Filtering JSON array is just as simple as working with XML

During my project, I have transitioned from using XML format to JSON format. The XML structure includes nodes such as: <Creature> <Name>Someone</Name> <Desert>false</Desert> <Woods>false</Woods> < ...

What is preventing me from running UNIT Tests in VSCode when I have both 2 windows and 2 different projects open simultaneously?

I have taken on a new project that involves working with existing unit tests. While I recently completed a course on Angular testing, I am still struggling to make the tests run smoothly. To aid in my task, I created a project filled with basic examples f ...

Omit an enum item from selection when referencing the key within the Enum

Within my enum, I have defined multiple keys: export enum MyTypeEnum { one = 'one', two = 'two', three = 'three', four = 'four' } To ensure certain types must contain these keys, I use the following ...

Utilize Material UI search feature to perfectly align with the chosen design aesthetic

Image Link What is the best way to create a search component that looks similar to the image using Material UI components? <TextField fullWidth variant="filled" label="Search" InputPro ...

Using Angular NgRx - triggering an action from an effect once certain actions yield a result

I'm encountering difficulties in dispatching actions that require results from five other actions (all listed in my effect). Could someone lend a hand? Essentially, I need to trigger an action within the effect only after these five actions have retu ...