Console.Log() shows me insertId is undefined for every row in cordova-sqlite

Ionic Framework
1

Hi guys,

I may of ran into a rather negligent error. I am trying to retrieve data from cordova-sqlite database. The table was populated well as I checked on Chrome’s WebView. I created my database following Simon Grimm’s Vlog https://devdactic.com/ionic-4-sqlite-queries/

Here’s my code as a reference:
db.service.ts
import { Injectable, OnInit, OnDestroy } from ‘@angular/core’;
import { Platform } from ‘@ionic/angular’;
import { SQLite, SQLiteObject } from ‘@ionic-native/sqlite/ngx’;
import { SQLitePorter } from ‘@ionic-native/sqlite-porter/ngx’;
import { BehaviorSubject , Observable } from ‘rxjs’;
import { HttpClient } from ‘@angular/common/http’;
import { Carcust, Carman, Customer, Carpaint } from ‘…/models/class-model’;
import { MessageService } from ‘./message.service’;
import { ApiService } from ‘./api.service’;

@Injectable({
providedIn: ‘root’
})
export class DbService implements OnInit {

private database: SQLiteObject;
private dbReady: BehaviorSubject = new BehaviorSubject(false);
carcust = new BehaviorSubject();
carman = new BehaviorSubject();
carmast = new BehaviorSubject();
customer = new BehaviorSubject();
carpaint = new BehaviorSubject();
part = new BehaviorSubject();
paintColor = new BehaviorSubject();

constructor(
private sql: SQLite,
private http: HttpClient,
private sqlitePorter: SQLitePorter,
private message: MessageService,
private api: ApiService,
private plt: Platform) {

  this.plt.ready().then(() => {
    this.sql.create({
      name: 'drsmashdata.db',
      location: 'default'
    })
    .then((db: SQLiteObject) => {
      this.database = db;
      this.seedDatabase();
    });
  })
}

ngOnInit() {
}

seedDatabase() {
  this.http.get('assets/seed.sql',{ responseType: 'text'})
  .subscribe(sql=>{
    this.sqlitePorter.importSqlToDb(this.database, sql)
    .then(_=>{
      this.dbReady.next(true);
    })
    .catch(e=>console.error(e));
  });
}

getDatabaseState = () => {
  return this.dbReady.asObservable();
}

getCarpaint = (): Observable<any[]> => {
  return this.carpaint.asObservable();
}

loadCarpaint = async () => {
  return this.database.executeSql('SELECT * FROM carpaint', []).then(data => {
    let carpaint: Carpaint[] = [];
    if (data.rows.lenght > 0) {
      for (let i=0; i<data.rows.lenght; i++) {
        carpaint.push({
          pk_carpaint: data.rows.item(i).pk_carpaint,
          description: data.rows.item(i).description,
          panel: data.rows.item(i).panel,
          panelred: data.rows.item(i).panelred,
          panelblue: data.rows.item(i).panelblue
        })
      }
    }
    
    this.carpaint.next(carpaint);
  })
}

addCarpaint = async (pk_carpaint, description, panel, panelred, panelblue) => {
  let data = [pk_carpaint, description, panel, panelred, panelblue];
  return this.database.executeSql('INSERT INTO carpaint(pk_carpaint, description, panel, panelred, panelblue)' + 
  'VALUES (?,?,?,?,?)', data)
  .then(data => {
    this.loadCarpaint();
  }, err => { console.log('addCarpaint db', err) })
}

network-settings.page.ts
import { Component, OnInit } from ‘@angular/core’;
import { Router } from ‘@angular/router’;
import { DrSmashDbService } from ‘src/app/services/dr-smash-db.service’;
import { Carcust, Carman, Carpaint } from ‘src/app/models/class-model’;
import { MessageService } from ‘src/app/services/message.service’;
import { Platform } from ‘@ionic/angular’;
import { DbService } from ‘src/app/services/db.service’;
import { LocalStorageService } from ‘src/app/services/local-storage.service’;
import { ApiService } from ‘src/app/services/api.service’;

@Component({
selector: ‘app-network-settings’,
templateUrl: ‘./network-settings.page.html’,
styleUrls: [’./network-settings.page.scss’],
})
export class NetworkSettingsPage implements OnInit {

ipAddress: string = ‘’;
spinner: boolean = false;

carcust: Carcust = ;
selectedCarcust: Carcust = ;
carpaint: Carpaint = ;

carman: {};
constructor(
private router: Router,
private db: DrSmashDbService,
private database: DbService,
private message: MessageService,
private plt: Platform,
private localStorageService: LocalStorageService,
private api: ApiService)
{
this.database.getDatabaseState().subscribe(ready => {
if (ready) {
console.log(‘DB ready!!’)
this.database.getCarpaint().subscribe(data => {
let carpaint = data;
console.log(‘getCarpaintData’, carpaint);
}, err => { console.log(err) })
}
}, err => { console.log(err) });

  this.ipAddress = this.localStorageService.getIPAddress()
}

In addition I use this method to populate my table
populateCarpaint = async () => {
try {
let res = await this.api.getCarpaint();
if (res) {
res.forEach(c => {
let payload = {
pk_carpaint: c.pk_carpaint,
description: c.description,
panel: c.panel,
panelred: c.panelred,
panelblue: c.panelblue
}

        this.database.addCarpaint(payload['pk_carpaint'], payload['description'], payload['panel'], payload['panelred'],
        payload['panelblue']);
      })
    }
  } catch (error) {
    console.log('populateCustomer menu', error)
  }
}

The problem that I found from my logs is that whenever it is time to loadCarpaint(), the insertId is undefined and that also makes getCarpaint() to return zero data back. am I missing something, please help, and thank you in advanced