Error while trying to connect application database also in browser

Question

I’m trying to test the database sqlite of an app also in the browser, only using web sql, I got to search and test some things, but so far nothing worked. My file controller.js is like this and when I run the application in the emulator/device the only error that appears is Cannot read Property 'id' of Undefined, despite displaying the category id correctly, I don’t understand why this error is appearing on the console.

Already in the browser the error is this: Cannot read Property 'transaction' of Undefined, and indicates that the error is on the line that has the $cordovaSQLite.execute, in the controller HomeCtrl.

controller js.

marketApp.controller("ConfigCtrl", function($rootScope, $ionicPlatform, $location, $cordovaSQLite) {
  $ionicPlatform.ready(function() {
    if(window.cordova) {
      var db = $rootScope.db = $cordovaSQLite.openDB({name: "market", location: "default"});
      $location.path("/home");
    } else {
      var db = window.openDatabase("market", "1.0", "mark", 100 * 1024 * 1024);
      $location.path("/home");
    }
    db.transaction(populateDB);
  });

  function populateDB(tx) {
    tx.executeSql("DROP TABLE IF EXISTS tblCategories");
    tx.executeSql("CREATE TABLE IF NOT EXISTS tblCategories (id integer primary key, category_name text)");
    tx.executeSql("CREATE TABLE IF NOT EXISTS tblPlaces (id integer primary key, category_id integer, place_name text)");
    tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["Academias"]);
    tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["Bares e Restaurantes"]);
    tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["Farmácias"]);
  }
});

marketApp.controller("HomeCtrl", function($scope, $ionicPlatform, $cordovaSQLite) {

  $scope.categories = [];

  $ionicPlatform.ready(function() {
    var query = "SELECT id, category_name FROM tblCategories";
    $cordovaSQLite.execute($scope.db, query, []).then(function(res) {
      if(res.rows.length > 0) {
        for(var i = 0; res.rows.length; i++) {
          $scope.categories.push({category_id: res.rows.item(i).id, category_name: res.rows.item(i).category_name});
        }
      }
    }, function(err) {
      console.log(err);
    });
  });

});

I wish I could test in the browser because it is faster, but if there is some other way to do this type of test without always having to build the app, it will also be useful for me.

Answer 1

Change your

for(var i = 0; res.rows.length; i++)

for

for(var i = 0; i < res.rows.length; i++)

When you have ; res.rows.length; the loop will rotate infinitely; eventually res.rows.item(i) returns Undefined because of the i++.