CODEWITHSUNDEEP
sqlitecordovaionic-frameworkionic-storage
amedina
amedina

Reputation: 3426

Ionic 3 SQLite: SQLiteObject's method executeSql() not working

What I have done:

  1. Installed ionic today, by the command npm install -g ionic and saying 'y' to the cordova integration.
  2. Installed cordova: npm install -g cordova
  3. Created a new project: ionic start sqlite3demo blank

  4. Installed Ionic native storage:

    ionic cordova plugin add cordova-sqlite-storage

    npm install --save @ionic-native/sqlite

Now for the code. I imported SQLite into app.module.ts like this:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SQLite } from '@ionic-native/sqlite';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SQLite
  ]
})
export class AppModule {}

And then, I modified the default home page like this:

<ion-header>
  <ion-navbar>
    <ion-title>
      SQLite demo
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-content>

    <button ion-button (click)="createTables()">Create db</button>
    <p>Result: {{ message }}</p>

  </ion-content>
</ion-content>

And finally, I modified home.ts like this:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  message = '';
  db: SQLiteObject;

  constructor(private platform: Platform, public navCtrl: NavController, private sqlite: SQLite) {
    this.platform.ready().then(() => {
      this.sqlite.create({
        name: 'todos.db',
        location: 'default'
      })
        .then((db: SQLiteObject) => {
          this.message = JSON.stringify(db);
          this.db = db;
        });
    });
  }

  public createTables() {
    return this.db.executeSql(
      `CREATE TABLE IF NOT EXISTS list (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT
      );`)
      .then(() => this.message = 'OK')
      .catch((err) => this.message = "error detected creating tables -> " + JSON.stringify(err));
  }

}

After all that, I execute ionic cordova run android, and I can see the JSON from db, but after that, I click the button to create a table and instead of seeing 'OK', I see the JSON from the error.

Start

After pressing the button

What did I do wrong? Why isn't it working?

EDIT: The versions I'm using are:

"@ionic-native/sqlite": "^4.12.2",
"cordova-sqlite-storage": "^2.4.0"

Upvotes: 0

Views: 2508

Answers (2)

amedina
amedina

Reputation: 3426

Finally, as it's described here, the documentation was obsolete. The way executeSql() works is passing a [] as second parameter. It seems that Ionic Native team doesn't consider updating their documentation too much. There are other plugins with obsolete documentation too, like email composer, making developers wasting many hours on things that have solution already.

Upvotes: 4

Sandy.....
Sandy.....

Reputation: 2870

Please note that CREATE TABLE will throw an exception if the table already exists.
CREATE TABLE IF NOT EXISTS query will create the table if it doesn't exist, otherwise simply ignores the command by throwing an exception.
If you want to create a table anyhow then you need to drop the existing table by using DROP TABLE IF EXISTS before CREATE TABLE IF NOT EXISTS.

Upvotes: 0

Related Questions