Having issues displaying sqlite db data in nativescript application

Question

My app has a scoreboard page that is supposed to fetch data from sqlite db and display it onNavigatingTo page in a ListView but it does not do it as expected.

The xml page to display the results:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" navigatingTo="onNavigatingTo">

<ActionBar title="Scoreboard">
  <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="homeTap"/>
</ActionBar>

<StackLayout orientation="vertical">        
    <Label text="Your Performance Sheet"></Label>
    <ListView items= "{{results}}" > 
        <ListView.itemTemplate>
            <Label text="{{testname}}"/>
            <Label text="{{score}}"/>
            <Label text="{{percent}}"/>
        </ListView.itemTemplate>
    </ListView>
</StackLayout>

</Page>

The scoreboard-view-model:

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var Sqlite = require("nativescript-sqlite");

function scoreViewModel (database) {

var viewModel = new Observable();

viewModel.results = new ObservableArray([]);

viewModel.select = function () {
    this.results = new ObservableArray([]);
    database.all("SELECT * FROM scores").then(rows => {

    for (var row in rows) {         
        this.results.push(rows[row]); 
    }
    }, error => {
        console.log("SELECT ERROR", error);
    })
}   
viewModel.select();

return viewModel;       
}

exports.scoreViewModel = scoreViewModel;

I am selecting all the data from the scores table and pushing to viewModel.results array which is already bound to the view.

The scoreboard.js :

var observable = require("data/observable");
var scoreViewModel = require("./scoreboard-view-model").scoreViewModel;
var page;
var Sqlite = require("nativescript-sqlite");

exports.onNavigatingTo = function (args) {
page = args.object;


(new Sqlite("scoreboard.db")).then(db => {
    db.execSQL("CREATE TABLE IF NOT EXISTS scores (id INTEGER PRIMARY KEY AUTOINCREMENT, testname TEXT, score TEXT, percent TEXT)")
    .then(id => {
        page.bindingContext = scoreViewModel(db);           
    }, error => {
        console.log(error)
    });
}, error => {
    console.log(error);
});
}

Someone please help me get the data to show up in the list view.

Hey Dammy, did you confirm that data is coming back from your database correctly? Just wondering if that’s the problem or whether this is a binding issue. At a glance everything you have here looks reasonable. — TJ VanToll
– TJ VanToll, Commented Nov 17, 2016 at 18:39
Yes TJ, data is coming from the database, i logged it to the console to be sure. It's working now, got it to display by editing the view model. — Dammy joel
– Dammy joel, Commented Nov 17, 2016 at 22:33

Dammy joel · Accepted Answer · 2016-11-17 22:41:42Z

1

I got it work by editing the scoreboard-view-model.js file, precisely in the viewModel.Select function:

viewModel.select = function () {
    //the line below was changed to this...
    //testname, score, and percent are column names in the scores table
    database.all("SELECT testname, score, percent FROM scores").then(rows => {

    for (var row in rows) {
        //the line below was changed too...     
        viewModel.results.push({testname: rows[row][0], score: rows[row][1], percent: rows[row][2]});
    }, error => {
        console.log("SELECT ERROR", error);
    })
}

Done. it works as expected now. Thanks TJ Vantoll for trying to help. Really Appreciated.

answered Nov 17, 2016 at 22:41

Dammy joel

5623 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TJ VanToll Over a year ago

Also thanks for leaving your solution here for others to benefit from.

Dammy joel Over a year ago

It's the least i could do.

Collectives™ on Stack Overflow

Having issues displaying sqlite db data in nativescript application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related