Whenever Ionic is paired with LokiJS, it consistently results in the error message: "ionic.bundle.js:26794 TypeError: Cannot read property 'insert' of undefined"

Having faced numerous issues with SQLite, I decided to explore LokiJS as an alternative solution for my Ionic app. However, even with LokiJS, I encountered challenges.

Currently, I have a simple code that should function smoothly:

.controller('ProjectsController', ['$scope', '$state', '$ionicPlatform', function($scope, $state, $ionicPlatform) {
  var pcVm = this;

  var db;
  var projects1;

  $ionicPlatform.ready(function(){

    var idbAdapter = new LokiIndexedAdapter('loki');
    db = new loki('lkr-v4', {
      autoload: true,
      autoloadCallback : getAllProjects,
      autosave: true,
      autosaveInterval: 10000,
      adapter: idbAdapter
    });

    function getAllProjects() {
      var options = {};
      db.loadDatabase(options, function() {
        projects1 = db.getCollection('projects'); // GET
        if (!projects1) {
          projects1 = db.addCollection('projects'); // ADD
        }
        console.log('Database information');
        console.log(db);
        console.log('Collection information');
        console.log(projects1);
      });
    }

    console.log('Insert something');
    projects1.insert({ name : 'odin' });
  }); // End of .ready()

However, I keep receiving the following error message:

ionic.bundle.js:26794 TypeError: Cannot read property 'insert' of undefined
    at controllers.js:309
    at ionic.bundle.js:56230
    at Object.ready (ionic.bundle.js:2140)
    at Object.ready (ionic.bundle.js:56223)
    at new <anonymous> (controllers.js:283)
    at Object.instantiate (ionic.bundle.js:18010)
    at $controller (ionic.bundle.js:23412)
    at self.appendViewElement (ionic.bundle.js:59900)
    at Object.render (ionic.bundle.js:57893)
    at Object.init (ionic.bundle.js:57813)(anonymous function) @ ionic.bundle.js:26794(anonymous function) @ ionic.bundle.js:23507$broadcast @ ionic.bundle.js:30720$state.transition.resolved.then.$state.transition @ ionic.bundle.js:52157processQueue @ ionic.bundle.js:29127(anonymous function) @ ionic.bundle.js:29143$eval @ ionic.bundle.js:30395$digest @ ionic.bundle.js:30211$apply @ ionic.bundle.js:30503done @ ionic.bundle.js:24824completeRequest @ ionic.bundle.js:25022requestLoaded @ ionic.bundle.js:24963
controllers.js:301 Databaseinformation

I need assistance in resolving this issue. It seems like I am encountering similar problems with both SQLite and LokiJS. Any guidance would be greatly appreciated.

Thank you, Christian.

UPDATE-2016-08-05

After spending countless hours searching and testing, I consistently face the same errors. I find it perplexing how tutorials appear to work flawlessly while I struggle to get my code running.

I completely revamped my factory:

(function() {
  'use strict';

  angular.module('lkr-v4')

    .factory('PersistenceService', ['$q', 'Loki', PersistenceService]);

      function PersistenceService($q, Loki) {
        // Necessary variables
        var lkrDb; // Database
        var projects; // Collection of JSON strings

        // Accessible Members Up Top
        // https://github.com/johnpapa/angular-styleguide/tree/master/a1#style-y052
        var pService = {
          initDB: initDB,
          getAllProjects: getAllProjects,
          addProject: addProject,
          updateProject: updateProject,
          deleteProject: deleteProject
        };
        return pService;

        // Initialization of the database
        function initDB() {
          var idbAdapter = new LokiIndexedAdapter('loki');
          lkrDb = new loki('lkr-v4', {
            autoload: true,
            autoloadCallback: getAllProjects,
            autosave: true,
            autosaveInterval: 10000,
            adapter: idbAdapter
          });
        }

        // Function to return a collection of JSON strings (all found projects) in the LokiJS database file
        function getAllProjects() {
          // What is $q? See https://docs.angularjs.org/api/ng/service/$q
          return $q(function (resolve, reject) {
            var options = {};
            lkrDb.loadDatabase(options, function () {
              projects = lkrDb.getCollection('projects'); // GET!
              // If the database file is empty
              if (!projects) {
                projects = lkrDb.addCollection('projects'); // ADD!
              }
              resolve(projects.data);
            });
          });
        }

        // Function to add a project
        function addProject(project) {
          if(lkrDebug) {
            console.log('Inside of addProject from the factory');
            console.log('This is the projects object');
            console.log(this.projects);
            console.log('This is the given value of the new project');
            console.log(project);
          }
          projects.insert(project);
        }

        // Function to update a project
        function updateProject(project) {
          projects.update(project);
        }

        // Function to delete a project
        function deleteProject(project) {
          projects.remove(project);
        }

      } // End of function PersistenceService

})(); // End of IIFE

In my app.js run(), I call PersistenceService.initDB(). THIS WORKS!

All four pages in my app have their own controller implemented via controller as. In the first page's controller, I tried the following code:

  // Test #1: Get data
  PersistenceService.getAllProjects().then(function(projects) {
    pcVm.projects = projects;
    if(lkrDebug) {
      console.log('Inside of getAllProjects().then() from the controller');
      console.log('This is the project object from the PersistenceService');
      console.log(projects);
      console.log('And this ist the pcVm.projects object from the controller');
      console.log(pcVm.projects);
    }
  });

IT WORKS! I can see the correct information in the console and no errors are thrown.

The subsequent code placed directly after the above code in the same controller adds a project:

  // Test #2: Add a project
  PersistenceService.addProject({ name : 'odin' });

Executing this produces the following lines (and errors) on the console:

Inside of addProject from the factory
persistence.services.js:65 This is the projects object
persistence.services.js:66 undefined
persistence.services.js:67 This is the given value of the new project
persistence.services.js:68 Object {name: "odin"}
ionic.bundle.js:26794 TypeError: Cannot read property 'insert' of undefined
    at Object.addProject (persistence.services.js:70)
    at new ProjectsController (projects.controller.js:31)
    at Object.instantiate (ionic.bundle.js:18010)
    at $controller (ionic.bundle.js:23412)
    at self.appendViewElement (ionic.bundle.js:59900)
    at Object.render (ionic.bundle.js:57893)
    at Object.init (ionic.bundle.js:57813)
    at self.render (ionic.bundle.js:59759)
    at self.register (ionic.bundle.js:59717)
    at updateView (ionic.bundle.js:65398)(anonymous function) @ ionic.bundle.js:26794(anonymous function) @ ionic.bundle.js:23507$broadcast @ ionic.bundle.js:30720$state.transition.resolved.then.$state.transition @ ionic.bundle.js:52157processQueue @ ionic.bundle.js:29127(anonymous function) @ ionic.bundle.js:29143$eval @ ionic.bundle.js:30395$digest @ ionic.bundle.js:30211$apply @ ionic.bundle.js:30503done @ ionic.bundle.js:24824completeRequest @ ionic.bundle.js:25022requestLoaded @ ionic.bundle.js:24963
projects.controller.js:22 Inside of getAllProjects().then() from the controller
projects.controller.js:23 This is the project object from the PersistenceService
projects.controller.js:24 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
projects.controller.js:25 And this ist the pcVm.projects object from the controller
projects.controller.js:26 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

This sequence of events seems unusual, as it appears that addProject() gets called before getAllProjects().

To investigate further, I added console.log(lkrDb); in the addProject function and conducted more tests. It became evident that initDB in app.js functions correctly and that the addProject function can operate with the open database.

My inclination is that I may be making a mistake in the controller or with the getAllProjects function.

I will continue my search for a resolution but any pointers would be greatly appreciated.

Thank you, Christian.

javascriptangularjscordovaionic-frameworklokijs

Answer №1

Make sure to properly initialize projects1 by calling projects1.insert() only after you have called db.loadDatabase()'s callback.

Give it a shot using factory for database tasks as this is just a test. Also, review JavaScript variable scope to avoid similar issues in the future.

db.loadDatabase(options, function() {
  projects1 = db.getCollection('projects');
  if (!projects1) {
    projects1 = db.addCollection('projects');
  }
  projects1.insert({name: 'odin'});      
});

I hope this advice is helpful. Happy Coding :)

Update: Be sure to include your specific issue in the question.

Answer №2

It finally clicked for me when it comes to promises! This resource really cleared things up for me:

However, the real issue lies in the tutorials I've been using. It's puzzling why the tutorials seem to work flawlessly while my app struggles. The crux of the matter is that without calling the getAllProjects() function, the projects1 variable ends up empty. Why isn't the autoloadCallback triggering the function as expected? I have reached out through an Issue on the LokiJS project seeking clarity on what may be going wrong or if this behavior with the autoloadCallback isn't intended.

Once I have a fully functional solution in place, I'll make sure to share it here...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The AngularJs Wizard Validation Inputfield is unable to locate the scope

Hello all, I am new to AngularJs and encountering an issue with my code. Currently, my HTML structure looks like this: <div class="wizardContainer"> <wizard on-finish="finishedWizard()"> <wz-step title="1"> <h1>Questio ...

javascriptangularjsvalidationwizardngboilerplate

Issues with the functionality of straightforward AngularJS routing

I cannot figure out why the add screen is not routing correctly. Can anyone help me troubleshoot? Here is my app.js var moviesApp = angular.module('moviesApp', ['ngRoute']); moviesApp.config(function($routeProvider) { $routeProvid ...

angularjsroutes

Using Jquery Mobile to make an AJAX POST request with XML

Is it possible to use this code for XML parsing? I have successfully parsed using JSON, but there is no response from the web service. This is the status of the webservice: http/1.1 405 method not allowed 113ms $j.ajax({ type: "GET", async: false, ...

javascriptajaxjqueryjquery-mobile

Is there a way to display all articles within an array while utilizing a computed property to sort through outcomes on VueJS?

I am currently utilizing VueJS to display a collection of articles. Additionally, I have integrated filters that utilize checkboxes and a computed property to refine the display of articles based on the selected tag. However, I am interested in incorporat ...

javascriptvue.jsvuejs2

Updating a component with React JS setState() must be done on a mounted or mounting component

I encountered an issue where I am getting the error message setState(...): Can only update a mounted or mounting component., but I am struggling to find a solution. import React, { Component } from 'react'; import Loading1 from '../images/ ...

javascriptreactjsjsx

What is the process for transitioning from Ajax to Fetch API in JavaScript?

Currently, I am utilizing the JavaScript version of RiveScript which relies on ajax, and I have decided to move away from using jQuery. There is a single line of ajax code that I need to update to integrate the new Fetch API. **Note: The ajax code can be ...

javascriptjqueryajaxfetch-apirivescript

The elements within the array are being refreshed accurately, however, a separate component is being removed

I have developed a component that has the ability to contain multiple Value components. Users can add as many values as they want, with the first value being mandatory and non-removable. When adding two new Value components, I provide input fields for name ...

javascriptvue.js

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

javascripthtmlcss

The canDeactivate function in the Angular 2 router can modify the router state even if I choose to cancel an action in the confirmation popup

In my Angular 2 project, I have implemented the canDeactivate method to prevent browser navigation. When a user tries to leave the page, a confirmation popup is displayed. However, if the user chooses to cancel, the router still changes its state even th ...

javascriptangulartypescriptangular2-routing

A problem occurred while compiling the 'SharedModule' template: The expression form is not compatible with the current system

In creating this share module, I have included the following components: @NgModule({ declarations: [ , DateToPersian , EnumToArrayPipe , SearchWtihInput , ConvertbytePipe , ArraySortPipe , MonySplitePipe , IsEllipsisActiveDir ...

javascriptangulartypescript

Choosing a random dropdown item in an AngularJS application with Selenium using Java

Currently, I am in the process of learning automation using Selenium to test an angularjs application. I am facing a challenge in writing java code that will allow me to select random options from a dropdown menu. Html: <select ng-model="attribute" ng ...

angularjsseleniumselectxpathwebdriverwait

Issues with returning undefined values in JSON with Node.js and AngularJS

I have developed an application that communicates with an API to retrieve and display data. The process involves entering a username in the client input, which is then sent to the server. Upon checking, everything seems to be working fine at this stage. H ...

javascriptjsonangularjsnode.js

Steps for displaying the contents of a file from Firebase storage on a React component

I uploaded a file to Firebase storage, and I want my app to be able to access and display the contents of that file within my class component div. Currently, when I try to access the file, it just opens in a new tab instead. class ScanResult extends Comp ...

javascriptreactjsfirebasefirebase-storage

Interval function not initiating properly post bullet navigation activation

Currently, I am experiencing an issue with my custom slider where the auto sliding set interval function is not working after using the bullet navigation. Despite trying to implement "setTimeout(autoSlide, 1000);", it doesn't seem to be resolving the ...

javascriptjqueryhtmlcss

Should one use Javascript library dependencies with or without bundling?

I'm in the process of packaging a library so that it can be utilized in two different ways: <script src="myLib.js"/> as well as mylib = require('myLib') However, myLib relies on several other libraries, some of which I believe the ...

javascriptnpmwebpacknode-modules

Determine the amount of time that can be allocated based on the attributes contained within the object

I am faced with a JSON structure like the one below: var meetings = [ { id: '1', start_time: "2020-11-15T08:30:00+00:00", end_time: "2020-11-15T14:15:00+00:00" }, { id: '2', start_time: &quo ...

javascriptangulartypescript

Passing data retrieved from fetch requests in ReactJS using context: Best practices

Just started learning React and need some help. I'm trying to pass variables with json data to a component for further use but running into errors. What changes should I make to use variables with json data from Store.js in the product.js component? T ...

javascriptjsonreactjs

Enlist partial components in express-handlebars

I'm having trouble registering partials in my app. Despite trying various solutions from other sources, nothing seems to work for me... I have set up the express handlebars as follows: import { engine } from 'express-handlebars'; const __fi ...

javascriptnode.jsexpresshandlebars.js

Decide on the javascript/jquery libraries you want to include

My app is experiencing slow loading times on the home screen and students using it from school district computers are running into ERR_CONNECTION_RESET errors due to strict firewalls. The excessive loading of javascript and jquery libraries in the head of ...

javascriptjqueryruby-on-railsjquery-ui

Unable to trigger onSelect event on the datepicker component

Whenever a date is chosen, I need to trigger a javascript function. Here is the javascript code: $(document).ready(function(){ var date_input=$('input[name="date"]'); //our date input has the name "date" var container=$('.bootstrap- ...

javascriptjquery