Populate Ionic List from Sqlite Database

1

I have want to show value from sqlite to ionic list. I have used view

ion-item class=“item-remove-animate item-avatar item-icon-right” ng-repeat=“chat in category in categories” >
h2>  {{category.slno}}.  {{category.branch_code}}
h2>Branch: {{category.branch_name}}
i class=“icon ion-chevron-right icon-accessory”>
/ion-item>
/ion-list>
//
I have used controller below
db.transaction(function(tx) {
tx.executeSql(“SELECT * from branch_location;”, [], function(tx, res) {
var len = res.rows.length;
if(len>0){
for (var i = 0; i < len; i++) {
$scope.categories.push({slno: res.rows.item(i).slno, branch_code: res.rows.item(i).branch_code,branch_name: res.rows.item(i).branch_name});
}

                  }
             })
        });
2

I’m not sure of your question, but I did clean up your code snippets so others can read it easier.

<ion-item>
  <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in category in categories" > 
    <h2>{{category.slno}}.{{category.branch_code}}
    <h2>Branch: {{category.branch_name}} 
    <i class="icon ion-chevron-right icon-accessory"> 
  </ion-item>
</ion-list>

db.transaction(function(tx) {
  tx.executeSql("SELECT * from branch_location;", [], function(tx, res) {
    var len = res.rows.length;
    if(len>0) {
      for (var i = 0; i < len; i++) { 
        $scope.categories.push({
          slno: res.rows.item(i).slno,
          branch_code: res.rows.item(i).branch_code,
          branch_name: res.rows.item(i).branch_name
        });
      }
    }
  })
});
1 Like
3

Hello bradleyprice,
You are right. You have written my code correctly. I have made mistake bellow ng-repeat=“chat in category in categories” it will be ng-repeat=" category in categories"

but till data won’t show in ionic list from sqlite. I have inserted correctly data in sqlite.

Please help me…

4

Although I don’t recommend using the Web sql database, here is your working app:

I imagine that you had a typo, or you didn’t call $scope.$apply()

http://play.ionic.io/app/b3609dae4d01

Here’s the code, incase the play changes:

.controller('testController', function($scope) {
  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  $scope.categories = [];
  
  db.transaction(function(tx) {
    tx.executeSql('DROP TABLE branch_locations');
    tx.executeSql('CREATE TABLE IF NOT EXISTS branch_locations (slno, branch_name, branch_code)');
    tx.executeSql('INSERT INTO branch_locations (slno, branch_name, branch_code) VALUES (?, ?, ?)', [1, 'test_name', 'test_code']);
    tx.executeSql('INSERT INTO branch_locations (slno, branch_name, branch_code) VALUES (?, ?, ?)', [2, 'test_name', 'test_code']);
    tx.executeSql('SELECT * FROM branch_locations', [], function (tx, results) {
      var len = results.rows.length;
      for (var i = 0; i < len; i++) {
        $scope.categories.push({
          slno: results.rows.item(i).slno,
          branch_name: results.rows.item(i).branch_name,
          branch_code: results.rows.item(i).branch_code
        });
        // Make sure to apply scope change so that ng-repeat updates
        $scope.$apply();
      }
    });
  }, function(error) {
    console.log(error)
  });
});

  <body ng-app="app" ng-controller="testController">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding">
        <ion-list>
          <ion-item ng-repeat="category in categories">
            <h2>{{category.slno}} {{category.branch_code}}</h2>
            <h2>Branch: {{category.branch_name}}</h2>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-pane>
  </body>
1 Like
5

Thanks it now working

1 Like
6

Thanks a lot for your co-operation. I have done nicely. You co-operation is nice.

7

Hello Sir,
Every time when i open app then it drop data. I just
want to drop table when i want to add add column or new table created
in updated version.
I have used to your modified code. It is working nice.When i use bellow code It drops all data stored in locally
db = window.sqlitePlugin.openDatabase({name: “DB”});
db.transaction(function(tx) {
tx.executeSql(‘DROP TABLE IF EXISTS user_info’);
tx.executeSql(‘CREATE TABLE IF NOT EXISTS user_info (user_id text)’);
})

Please help me…

8

Have you tried removing this line?

9

See my easy example: https://github.com/jdnichollsc/Ionic-Starter-Template

Regards, Nicholls

2 Likes
10

Thank you.
I was suffering with this issue and it’s solve in second.:grinning:

2 Likes
11

Nice one brad. I think I have a different issue. I am trying to insert ionic form data after registration into the sqlite database. How can I do that? I’m new to ionic.
Here is my code:

Full Name Phone Password Sign Up