CODEWITHSUNDEEP
sqlitetypescriptcordovavisual-studio-codeionic4
oneManArmin
oneManArmin

Reputation: 706

Ionic: SQL Lite Insert Into Statement does not work

I'm trying to create a simple Android App with Ionic. I want to use a SQL Lite db with the help of some articles on SQL Lite and Ionic and Ionic and Cordova from browser. I managed to setup my db (at least my App seems to run) with the following code used in app.components.ts after this.initializeApp() :

init_db(){
var config = this.sqlite.create({
  name: 'data.db',
  location: 'default'
})
.then((db: SQLiteObject) =>{
  this.db = db;
  db.executeSql('CREATE TABLE "ExpenseModel" ( `EXPENSE_LIMIT` INTEGER NOT NULL, `ID` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `MODEL_NAME` TEXT NOT NULL UNIQUE, `PINNED` INTEGER )');
  // .then(() => console.log('Executed'))
  // .catch(e=> console.log(e));

});
// .catch(e => console.log(e));

(exception handling is commented out only to see if an exception is thrown)

However, the following code doing a simple SQL Lite insert does not work:

this.db.executeSql('INSERT INTO "ExpenseModel" (EXPENSE_LIMIT, ID, MODEL_NAME, PINNED) VALUES ( 5,1, \'asd\', 1)');

When I run the app with ionic cordova run browser, I get a white screen. When I run it with ionic serve and catch all the exceptions (otherwise even db init will not work) I get the error Cannot read property 'executeSql' of undefined

What is it that I'm doing wrong? My insert code worked in an online editor, so I do not assume it's the SQL.

Upvotes: 0

Views: 2055

Answers (3)

Tej Patel
Tej Patel

Reputation: 119

1 -> Install the Cordova and Ionic Native plugins:
ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic-native/sqlite

2 -> Add this plugin to your app's module
import {SQLite} from "@ionic-native/sqlite";
providers: [ SQLite, ]

3 -> in AddItem Page import this: 

 import {SQLite, SQLiteObject} from '@ionic-native/sqlite'; <br>
 constructor(private sqlite: SQLite);
 addItem() {
    this.sqlite.create({
        name: 'ionicdb.db',
        location: 'default'
    }).then((db: SQLiteObject) => {
        db.executeSql('INSERT INTO bikes VALUES(NULL,?,?,?,?,?)', [this.date, this.item.modal, this.item.company, this.item.color, this.imageString])
            .then((res) => {
                this.presentToast("Data Saved Successfully");
            })
            .catch((err) => {
                console.log('Error in SaveData------');
                console.log(JSON.stringify(err));
                this.presentToast("Error in SaveData");
            });
    }).catch((e) => {
        console.log("ERROR in SaveData:------");
        console.log(JSON.stringify(e));
        this.presentToast("ERROR in SaveData");
    });
    this.navCtrl.push(HomePage);
}

Then build your project and run in actual Device. ex: Android Phone.
SQlite require Actual Device to perform Correctly..

This Works for me like charm. hope this will help you... :)

Upvotes: 2

Frank Lewis
Frank Lewis

Reputation: 46

If anybody else finds themselves here, I had this issue, but it was because I was using transaction keywords in my query, rather than the SQLite Plugin's built-in transaction functionality.

i.e. I Was doing:

db.executeSql("BEGIN TRANSACTION; <MY DB SETUP>; COMMIT;",[])

//Rather than
db.transaction((tx) => tx.executeSql("<MY DB SETUB>",[]);

That got things going for me.

Upvotes: 0

Everton Costa
Everton Costa

Reputation: 650

You need to run your app in a real device to get SQlite resources working, or use IndexedDB mode to have it working on the browsers. But there are some tips to get the SQlite running on the browser like "Mocking SQLite native plugin". And others like "Ionic Native SQLite Storage — Browser" and also "Ionic 3, Angular 4 and SQLite CRUD".

Upvotes: 1

Related Questions