AngularJS populate select dropdown from SQLite database

Question

I have created a cross platform app using AngularJS, Monaca and Onsen UI.

I have created a SQLite Database to store information locally in the app to be available offline at any time.

I create the SQLite Database and Table and insert values into it and all this is working as it should - below for sample code of CREATE and INSERT form my views app.js controller.

app.js

function createDB(tx)
{
    tx.executeSql('DROP TABLE IF EXISTS tb_my_list');
    tx.executeSql('CREATE TABLE IF NOT EXISTS tb_my_list (id INTEGER PRIMARY KEY, name, score)');

    tx.executeSql('INSERT INTO tb_my_list (id, name, score) VALUES (01, "Name 1", 111)');
    tx.executeSql('INSERT INTO tb_my_list (id, name, score) VALUES (02, "Name 1", 222)');   
}

I then declare a variable to hold the results from the SQLite Database to access this in my view.

$scope.DatabaseData = [];

function queryDB(tx)
{
    tx.executeSql('SELECT * FROM tb_my_list', [], querySuccess, errorCB);
}

function querySuccess(tx, results)
{
    var len = results.rows.length; // Shows "2" - as INSERTED values
    $scope.databaseData = results; // Returns [object SQLResultSet]
}

In my view I have a select dropdown box where I want to populate the dropdown items with the values fro my SQLite Database name column.

I try to use ng-options but no values are shown in the dropdown list. Below is my views select where I try to populate the values.

<select ng-model="myDataDropDown" ng-options="databaseData.id as databaseData.name for databaseData in DatabaseData"><option value="" label="-- Please Select --"></option></select>

Can I access the name values like this directly or do I need to convert from SQLite to JSON first?

You need to convert your data to json with http://stackoverflow.com/a/9036552/1618775 — Umut Catal, Jul 07 '16 at 11:03

enRaiser · Accepted Answer · 2016-07-13T06:01:37.137

You can create a normal array object from the response like this

 function querySuccess(tx, results)
{
    var len = results.rows.length; 
    var output_results = [];

    for (var i=0; i<len; i++){
       var theItem = results.rows.item(i);
       output_results.push(theItem.name);
    }
    $scope.databaseData = output_results;
}

then use a simple ngoption like this

ng-options="item for item in databaseData

However IF you want a name value pair in list then... its bit different.

 function querySuccess(tx, results)
{
    var len = results.rows.length; 
    var output_results = [];

    for (var i=0; i<len; i++){
       var theItem = results.rows.item(i);
       output_results.push({id: theItem.id,'name': theItem.name});
    }
    $scope.databaseData = output_results;
}

then use a complex ngoption like this

ng-options="option.name for option in databaseData track by option.id"

AngularJS populate select dropdown from SQLite database

1 Answers1