I actually try to make an mobile app with SQLite. I juste try to create two tables:
constructor(private sqlite:SQLite,public modalCtrl: ModalController,public navCtrl: NavController, private navParam: NavParams, private databaseprovider: DatabaseProvider, private employeesProvider: EmployeeProvider) {
this.createDetabaseFile();
}
private createDetabaseFile() : void {
this.sqlite.create({
name: DATABASE_FILE_NAME,
location: 'default'
}).then((dbRes: SQLiteObject) => {
alert("bdd créée");
this.db = dbRes;
this.createTables();
})
}
private createTables() : void {
this.db.executeSql('CREATE table IF NOT EXISTS symbole(id INTEGER NOT NULL ,name TEXT)',{})
.then(() => {
alert("table symbole created");
this.db.executeSql('CREATE table IF NOT EXISTS representationPhoto(name VARCHAR(32))',{})
.then(() => {
alert("table representationPhoto created");
})
.catch(e => alert("erreur creation table"));
})
.catch(e => alert("erreur creation table"));
}
And db.executeSql() seem not working, indeed, the alert("table symbole created"); don't appear, however alert("bdd créée") appear, and the program don't triggered the catch.
Have you an idea?
ps: sorry for my bad english
Kindly try declaring db variable above createDetabaseFile function it seems to me the problem because you are using this.db without declaring it in the class scope.
Try doing this:
public db: any; // above createDetabaseFile function
You're missing platform ready block before handling SQLite.Try this:
import { Platform } from 'ionic-angular';
constructor(private platform: Platform, ...other imports) {
this.platform.ready().then(() => {
this.createDetabaseFile();
})
}
Related
I'm trying to use the same data in ngOnInit of several components, the problem is, the data are random every time I subscribe to it. I can only subscribe one time in the entire run of the app. That means, if I subscribe twice, it won't have any use because each component will have something else.
I want to subscribe once in a service and to create a global variable.
but when you try to use that global variable in all the components (on ngOnInit) it is always undefined.
How can I make the components wait for that same thing that can only be called once in the app?
export class UsersService {
public allUsers: Array<Object> = []
public allUsersUrl: string = 'https://glacial-escarpment-40412.herokuapp.com/users/'
constructor(private http: HttpClient) {
this.getAllUsers().subscribe(data => {
this.allUsers = data;
console.log(this.allUsers)
})
}
getAllUsers(): Observable<any> {
return this.http.get<any>(this.allUsersUrl);
}
getUser(id: number): Observable<any> {
return this.http.get<any>(this.allUsersUrl + id);
}
}
My components:
export class FirstComponent {
constructor(private usersService: UsersService){}
ngOnInit() {
console.log(this.usersService.allUsers) //undefined
}
export class SecondComponent {
constructor(private usersService: UsersService){}
ngOnInit() {
console.log(this.usersService.allUsers) //undefined
}
Please help me :)
You have a synchronism problem. This is your scenario
1- create first component
1.1 - injecting UsersService
1.2 - UsersService request for ASYNC data (execution continues)
2- FirstComponent get and print this.usersService.allUsers (not still populated because of async request)
3- this.usersService.allUsers is still undefined
You need Subject
Something like this:
UsersService
export class UsersService {
private _allUsersSource = new Subject<Array<Object>>();
private _allUsers$ = this._allUsersSource.asObservable();
public allUsersUrl: string = 'https://glacial-escarpment-40412.herokuapp.com/users/'
constructor(private http: HttpClient) {
this.getAllUsers();
}
getAllUsers(): Observable<any> {
return this.http.get<any>(this.allUsersUrl).subscribe(
data => this._allUsersSource.next(data)
);
}
get allUsers$(): Observable<Array<Object>> {
return this._allUsers$;
}
// OTHERS
}
FirstComponent
export class FirstComponent {
subscription: Subscription;
allUsers: Array<Object>;
constructor(private usersService: UsersService){}
ngOnInit() {
this.subscription = this.usersService.allUsers$.subscribe(users => {
this.allUsers = users;
console.log(this.allUsers);
});
}
Some thing for SecondComponent
Please help me. I've made Database Provider to connect with SQLite in ionic 3. When i want to get the data rows it's always getting null but when I check data length it has 1
This is my DatabaseProvider
import { Injectable } from '#angular/core';
import { Platform } from 'ionic-angular';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Storage } from '#ionic/storage';
#Injectable()
export class DatabaseProvider {
private db: SQLiteObject;
private databaseReady: BehaviorSubject<boolean>;
constructor(private storage: Storage, private sqlite: SQLite, private platform: Platform) {
this.databaseReady = new BehaviorSubject(false);
this.platform.ready().then(() => {
this.sqlite.create({
name: 'takia.db',
location: 'default'
}).then((database: SQLiteObject) => {
this.db = database;
this.storage.get('database_filled').then(val => {
if (val) {
this.databaseReady.next(true);
} else {
this.initDB();
}
});
}).catch(e => { console.log(e); });
});
}
initDB(){
this.db.executeSql('CREATE TABLE IF NOT EXISTS users(user_id INTEGER PRIMARY KEY, username TEXT, email TEXT, password TEXT)', {})
.then(res => {
this.db.executeSql('INSERT INTO users VALUES(NULL,?,?,?,?)',['admin','admin.#email.com','password'])
.then(res => {
this.databaseReady.next(true);
this.storage.set('database_filled', true);
}).catch(e => {
console.log(e);
});
}).catch(e => {
console.log(e)
});
this.db.executeSql('CREATE TABLE IF NOT EXISTS questions(user_id INTEGER PRIMARY KEY, username TEXT, email TEXT, password TEXT)', {})
.then(res => {
this.db.executeSql('INSERT INTO users VALUES(NULL,?,?,?,?)',['admin','admin.tazkiaiibs.sch.id','bismillah'])
.then(res => {
this.databaseReady.next(true);
this.storage.set('database_filled', true);
}).catch(e => {
console.log(e);
});
}).catch(e => {
console.log(e)
});
}
getUser(){
return this.db.executeSql('SELECT user_id, username, email, password, COUNT(*) total FROM users', [])
.then(res => {
let users = [];
if (res.rows.length > 0) {
for (var i = 0; i < res.rows.length; i++) {
let row = res.rows.item(i);
users.push(row);
}
}
return users;
}, err => {
console.log('Error: ', err);
return [];
});
}
getDatabaseState() {
return this.databaseReady.asObservable();
}
}
and this is my code in component
constructor(public navCtrl: NavController,
public navParams: NavParams,
private dbProvider: DatabaseProvider,
private toastCtrl: ToastController) {
this.loadData();
}
loadData(){
this.dbProvider.getUser().then(data=>{
if(data.length>0){
this.id = data[0].id;
this.old_password = data[0].password;
this.username = data[0].username;
this.email = data[0].email;
let toast = this.toastCtrl.create({
message: 'ID '+data[0].username,
duration: 3000
});
toast.present();
}else{
let toast = this.toastCtrl.create({
message: 'No data'+data.length,
duration: 3000
});
toast.present();
}
});
}
When i run loadData function the length is not 0 but the data is null.
The comment under the question seemed to help, so I form it as an answer to hopefully collect some reputation points.
The problem seems to be a misformed SQL-query. The count(*) part makes the query return at least one row. Therefore the other fields might be NULL, when queried before data is added to the database.
The function "getUser" is called before the promise callback is executed.
I have an ionic 2 app with a database service powered by sqlite. The database stores a couple rows of items. The first page of the app displays those items. The issue I'm running into is that the page attempts to load the items before the service has loaded the database. I get this error:
Cannot read property 'executeSql' of undefined
If i navigate to a different page and back to home, it loads correctly. This is the database service. I'm attempting to call getScanables on the first page.
import { Injectable } from '#angular/core';
import {SQLite} from 'ionic-native';
import {Platform} from 'ionic-angular';
#Injectable()
export class Database {
private storage: SQLite;
public isOpen: boolean;
public constructor(private platform: Platform,) {
console.log('Creating storage.');
platform.ready().then(() => {
console.log('Platform Ready.');
if(!this.isOpen) {
console.log('Database Unopened');
this.storage = new SQLite();
this.storage.openDatabase({name: "data.db", location: "default"}).then(() => {
console.log('Generating Database');
this.storage.executeSql("CREATE TABLE IF NOT EXISTS scanables (id INTEGER PRIMARY KEY AUTOINCREMENT, value TEXT, type TEXT, name TEXT, date TEXT)", []);
//this.storage.executeSql("CREATE TABLE IF NOT EXISTS journal (id INTEGER PRIMARY KEY AUTOINCREMENT, role TEXT, descriptors TEXT, image TEXT, behaviors TEXT)", []);
console.log('Generated.');
this.isOpen = true;
}, (error) => {
console.log("Error opening database.", error);
});
}
});
}
public getScanables() {
console.log('Getting Scanables');
return new Promise((resolve, reject) => {
this.storage.executeSql("SELECT * FROM scanables", []).then((data) => {
let journal = [];
if(data.rows.length > 0) {
for(let i = 0; i < data.rows.length; i++) {
journal.push({
id: data.rows.item(i).id,
value: data.rows.item(i).value,
type: data.rows.item(i).type,
name: data.rows.item(i).name,
date: data.rows.item(i).date,
letter_one: data.rows.item(i).name.substring(0,1)
});
}
}
resolve(journal);
}, (error) => {
reject(error);
});
});
}
...
}
This is the relevant code for the first page:
#Component({
templateUrl: 'journal.html'
})
export class JournalPage implements AfterViewInit {
public orderType: string = 'delivery';
public autocomplete: {term: string, place: any};
public regions: any;
public itemList: Array<Object>;
public addList: Array<number>;
constructor(private navCtrl: NavController,
private menu: MenuController,
private modalCtrl: ModalController,
private database: Database,
public userService: UserService,
private helper: Helper,
private l: LoggerService) {
this.itemList = [];
this.addList = [1,2,3,4,5,6,7];
}
ngAfterViewInit(): any {
console.log('journal.ngAfterViewInit');
this.load();
}
public load() {
console.log('journal.load');
this.database.getScanables().then((result) => {
console.log('entered getScanables');
this.itemList = <Array<Object>> result;
console.log('itemList', this.itemList);
}, (error) => {
this.l.error('journal.ts:', error);
});
}
...
The solution for this issue was to make the service's database a public variable and load the database on load. Then only after loading the database we set the root page. This forces the database to load first. May not be the ideal solution though, so feel free to post additional answers.
I am trying to open a database and create a table in my Ionic 2 app.
The following method is part of a service and is supposed to open the db and create the table:
initDb() {
let db = new SQLite();
db.openDatabase({
name: "data.db",
location: "default"
}).then(() => {
db.executeSql("CREATE TABLE IF NOT EXISTS people (avatarUrl VARCHAR, firstName VARCHAR, lastName VARCHAR)", []).then((data) => {
console.log("Table created: ", data);
}, (error) => {
console.error("Unable to create table", error);
})
}, (error) => {
console.error("Unable to open database", error);
});
}
The method is called in my home page's constructor:
constructor(public platform: Platform, public navCtrl: NavController, public dbService: DBService) {
this.platform.ready().then(() => {
this.dbService.initDb();
});
}
I have no idea why I am getting this error (refer to the title).
Thanks
Sorry, I could not reproduce this error but build a testapp on my own. This app works with me, despite this is called within ready as well:
app.component.ts:
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen, SQLite } from 'ionic-native';
import { TabsPage } from '../pages/tabs/tabs';
import { DbService } from '../providers/db-service';
#Component({
templateUrl: 'app.html',
providers: [DbService]
})
export class MyApp {
rootPage = TabsPage;
constructor(public platform: Platform, public dbService: DbService) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
this.dbService.initDb();
});
}
}
I made this service by using this ionic-command:
ionic g provider DbService
db-service.ts:
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
import { SQLite } from 'ionic-native';
/*
Generated class for the DbService provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class DbService {
constructor(public http: Http) {
console.log('Hello DbService Provider');
}
initDb() {
let db = new SQLite();
db.openDatabase({
name: "data.db",
location: "default"
}).then(() => {
db.executeSql("CREATE TABLE IF NOT EXISTS people (avatarUrl VARCHAR, firstName VARCHAR, lastName VARCHAR)", []).then((data) => {
console.log("Table created: ", data);
}, (error) => {
console.error("Unable to create table", error);
})
}, (error) => {
console.error("Unable to open database", error);
});
}
}
ionic-version: 2.1.18
cordova-version 6.0.0
Hope it helps.
Angular 2 is fairly new. I have been using firebase-angular2 to create a service.
I ran the firebase-angular2 demo here https://github.com/KallynGowdy/firebase-angular2-demo but when I have been running it I get the following error
EXCEPTION: TypeError: heroes.map is not a function
angular2.dev.js:23083 EXCEPTION: TypeError: heroes.map is not a function
As far as I can tell it is referring to this section of code at ts/firebase-heros.service.ts
import {Injectable} from "../../node_modules/angular2/core";
import {HeroService} from "./hero.service";
import {Observable} from "../../node_modules/rxjs/Rx";
import {FirebaseService} from '../../node_modules/firebase-angular2/core';
import {Hero} from "./../interfaces/hero";
#Injectable()
export class FirebaseHeroService extends HeroService {
private service:FirebaseService;
constructor(firebaseService:FirebaseService) {
this.service = firebaseService.child('heroes');
}
getHeroes() {
var service = this.service;
return service.value.map((heroes) => {
return heroes.map((h, i) => {
// TODO: Cleanup
return {
id: h.id,
name: h.name,
save: function () {
return service.child(i.toString()).setData({
id: this.id,
name: this.name
});
}
}
})
});
}
}
Any ideas of what may be causing this problem?
thanks in advance
heroes is not array at this line, that's why you're getting an error:
return service.value.map((heroes) => {
console.log(heroes);
...
If you log it's value you can check what type it is and take appropriate action. If it's a response, you might need to convert it to JSON before processing it further
return service.value
.map(response => response.json())
.map((heroes) => {...