How do I save a filled value in a textfield to a SQL lite database in Ionic 6/Capacitor?-CodePudding

On Ionic 6, I'm learning how to create a SQL lite database. I have a use case in which I want the user to enter a value into the distance textfield. The value appears on the next page, and I want to save it to the database.

This is my home file with just one simple textfield.

Home.html

<ion-header [translucent]="true">
  <ion-toolbar >
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      SQL Lite Tutorial
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-grid>    
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label position="floating">Distance</ion-label>
          <ion-input [(ngModel)]="geodata.distance"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>   
    <ion-row>
      <ion-col>
        <ion-button  (click)="navigateToResultPage()" expand="full" shape="round">Result
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

The value appears on the next page after the user clicks the button.

Result.html

<ion-header>
  <ion-toolbar >
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Result</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>    
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
             <p [(ngModel)]="faveroute.distance">Distance: {{distance}}</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>   
    <ion-row>
      <ion-col>
         <ion-button  (click)="addRouteToFavorite()" expand="full" shape="round">Save to
      favorites</ion-button>
      </ion-col>
    </ion-row>  
    <ion-row>
      <ion-col>
        <ion-button  (click)="navigateToHomePage()" expand="full" shape="round">Back</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

This is my method I use to add the value to the database. I use a service called DatabaseService.

result.ts

faveroute: RouteInterface;


 addRouteToFavorite() {
    this.dataBaseService.addFavoriteRoute(this.faveroute['distance'])
      .then(data => {
        this.faveroute = { id: ??, distance: this.distance };
      });
  }

And this is my method from the service.

DatabaseService.ts

  addFavoriteRoute(distance) {
    let data = [distance];
    return this.database.executeSql('INSERT INTO favoriteroutes (distance) VALUES (?)', data).then(data => {
      this.getAllFavoriteRoutes();
    });
  }

In the DatabaseService I declare a interface like this.

export interface RouteInterface {
  id: number,
  distance: number
}

And this is my SQL script I use:

CREATE TABLE IF NOT EXISTS favoriteroutes(id INTEGER PRIMARY KEY AUTOINCREMENT, distance INTEGER);
INSERT or IGNORE INTO favoriteroutes VALUES (1, 56);
INSERT or IGNORE INTO favoriteroutes VALUES (2, 34);
INSERT or IGNORE INTO favoriteroutes VALUES (3, 234);

The database is operational. In my app, I can see the test data. However, when I try to add a new item from the results page, I receive an error.

Error I get in the android studio console:

ERROR TypeError: Cannot read properties of undefined (reading 'distance')

There are numerous tutorials on the internet for adding it from a textfield. However, in this use case, I want to add the value AFTER the user's input.

How can I add the distance property in my database?

CodePudding user response：

You cannot use ngModel with p tag. also I don't see how you initialized the faveroute variable, if you are not initializing it right, it'll be undefined thus giving you that error. if the card inside the result page is showing the distance properly, that means you are probably setting the distance variable when you are entering the result page. so I'd suggest you work with that instead. check if this fix works:

inside your Result.html file, replace

<p [(ngModel)]="faveroute.distance">Distance: {{distance}}</p>

with

<p>Distance: {{distance}}</p>

and inside your Result.ts file, replace the function with

addRouteToFavorite() {
    this.dataBaseService.addFavoriteRoute(this.distance)
      .then(data => {
        this.faveroute = { id: ??, distance: this.distance };//<- I don't understand what you are doing with this line
      });
  }