SQLite and TasksService problem


#1

Hi,

I have a very big problem and I’m a noob with ionic maybe a nice guy can help me. My code compile well but I cannot add a task in my DB when I run the app on my phone. My problem is that I want many inputs in “openAlertNewTask()” fonction. But since I added one input more it doesn’t work because I don’t see my task when I add one.
My code is based on this tutorial : https://www.ion-book.com/blog/ionic2/sqlite-and-ionic-2/ (only tutorial about SQL lite and ionic 2.2)

My file “classements.ts”

import { Component } from ‘@angular/core’;
import { NavController, AlertController } from ‘ionic-angular’;

import { TasksService } from ‘…/…/providers/tasks-service’;

@Component({
selector: ‘page-classements’,
templateUrl: ‘classements.html’
})
export class ClassementsPage{

tasks: any[] = [];

constructor(
public alertCtrl: AlertController,
public navCtrl: NavController,
public tasksService: TasksService
) {}

ionViewDidLoad(){
this.getAllTasks();
}

deleteTask(task: any, index){
this.tasksService.delete(task)
.then(response => {
console.log( response );
this.tasks.splice(index, 1);
})
.catch( error => {
console.error( error );
})
}

getAllTasks(){
this.tasksService.getAll()
.then(tasks => {
console.log(tasks);
this.tasks = tasks;
})
.catch( error => {
console.error( error );
});
}

openAlertNewTask(){
let alert = this.alertCtrl.create({
title: ‘Add fish’,
message: ‘information about fish’,
inputs: [
{
name: ‘title’,
placeholder: ‘weight’,
},
{
name: ‘test’,
placeholder: ‘size’,
}
],
buttons: [
{
text: ‘Cancel’,
handler: () =>{
console.log(‘cancel’);
}
},
{
text: ‘Create’,
handler: (data)=>{
data.completed = false;
this.tasksService.create(data)
.then(response => {
this.tasks.unshift( data );
})
.catch( error => {
console.error( error );
})
}
}
]
});
alert.present();
}

updateTask(task, index){
task = Object.assign({}, task);
task.completed = !task.completed;
this.tasksService.update(task)
.then( response => {
this.tasks[index] = task;
})
.catch( error => {
console.error( error );
})
}

}

My “tasks-service.ts”

import { Injectable } from ‘@angular/core’;
import { SQLiteObject } from ‘@ionic-native/sqlite’;

@Injectable()
export class TasksService {

// public properties

db: SQLiteObject = null;

constructor() {}

// public methods

setDatabase(db: SQLiteObject){
if(this.db === null){
this.db = db;
}
}

create(task: any){
let sql = ‘INSERT INTO tasks(title, test, completed) VALUES(?,?,?)’;
return this.db.executeSql(sql, [task.title, task.test, task.completed]);
}

createTable(){
let sql = ‘CREATE TABLE IF NOT EXISTS tasks(id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, test TEXT, completed INTEGER)’;
return this.db.executeSql(sql, []);
}

delete(task: any){
let sql = ‘DELETE FROM tasks WHERE id=?’;
return this.db.executeSql(sql, [task.id]);
}

getAll(){
let sql = ‘SELECT * FROM tasks’;
return this.db.executeSql(sql, [])
.then(response => {
let tasks = [];
for (let index = 0; index < response.rows.length; index++) {
tasks.push( response.rows.item(index) );
}
return Promise.resolve( tasks );
})
.catch(error => Promise.reject(error));
}

update(task: any){
let sql = ‘UPDATE tasks SET title=?, SET test=?, completed=? WHERE id=?’;
return this.db.executeSql(sql, [task.title, task.test, task.completed, task.id]);
}

}

My classement.html


#2

Directly dealing with SQLite seems like overkill here. I would just stick to ionic-storage. Much simpler and works in browser seamlessly.


#3

Thank you rapropos, I will check that but ionic-storage the data is deleted automaticly in IOS?
And do you know a good tutorial with ionic storage which explain how you can call SQL request with a button and how you can recover the value of a input to save this in the local storage.


#4

No. Read the documentation @rapropos linked to, it explains that and how Ionic Storage can actually use SQLite in the background for data storage.

Ionic Storage only uses SQL in the background, you only interface with it through a simple key value store and don’t have to do an SQL stuff. Same for local storage, you never think about that at all - just use Ionic Storage.


#5

ok thank you I solved my problem with Firebase !