Displaying multiple columns from a pre-populated database

[georgehodges5]

I’ve managed to set up the SQLite-Ext Cordova plugin so it will read a display data from a pre-populated database. It’s all working as it should on my Android device but I need to be able to display the data so that the first line of column one and the first of column two display above and below each other respectively and so on. For example, you’d see ‘AAA’ (the name column) on line one and directly below it would be the description of what this stands for, ‘Adaptive Antenna Array’ (the meaning column). This would then continue with all the other acronyms.

So far I have only been able to get them to display together by using the ‘+’ function but can only separate them using text such as a comma. Using a break or paragraph breaks the code. I have tried doing this as well as various other changes in both the HTML and Typescript files.

HTML Code-

<ion-header>
  <ion-navbar color='navbarColor'>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Acronym Finder</ion-title>
  </ion-navbar>
<style>

</style>
</ion-header>

<ion-content padding>

  <ion-list>
    <ion-item text-wrap *ngFor="let name of names">
		{{ name }}
		{{ meaning }}
   </ion-item>
  </ion-list>
  
</ion-content>

TS Code-
import { Component } from ‘@angular/core’;`
import { NavController } from ‘ionic-angular’;
import { SQLite } from ‘ionic-native’;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public storage: SQLite;
  private options = { name: "data7.db", location: 'default', createFromLocation: 1 };
  private queryNames = "SELECT * FROM acronymsFinal";
  public names: String[] = [];

  constructor(public navCtrl: NavController) {
    this.storage = new SQLite();
    /** Here's the code to make a simple call to the database 
     * 1st you need to open the database. If you need help see: https://github.com/litehelpers/Cordova-sqlite-storage#opening-a-database
     * 2nd you can make your call to the database now using executeSql method.
    */
    this.storage.openDatabase(this.options).then((success) => {
      console.info("Opened data7.db with success");
      this.storage.executeSql(this.queryNames, {}).then((data) => {
        let rows = data.rows;
        for (let i = 0; i < rows.length; i++) 
          this.names.push(rows.item(i).name + "," + rows.item(i).meaning);
        console.log("Number of names on database = " + this.names.length);
      });
    }, (err) => {
      console.log("Error opening database: " + err);
    });
  }
}

If anyone knows how I might be able to achieve this, I’d greatly appreciate it!

PS-I’m completely new to this stuff so please try to keep it simple.

[morris4ever69]

I’m not sure I understood the way you would like to show the data, but you could check the Multi-line List component

Ionic Framework

I hope it helps you.

I would suggest you to store the data in an object, something like:

.ts

for (let i = 0; i < rows.length; i++) {
  this.names.push({
    name: rows.item(i).name,
    meaning: rows.item(i).meaning
  });
}

.html

<ion-list>
  <ion-item *ngFor="let name of names; let nIndex = index">
    <h2>{{ name.name }}</h2>
    <p>{{ name.meaning }}</p>
  </ion-item>
</ion-list>

[georgehodges5]

Thank you very much, I’ll give it a go now.

[georgehodges5]

No luck, it keeps on coming up with the error-

Argument of type '{ name: any; meaning: any; }' is not assignable to parameter of type 'String'. Object literal may only specify known properties, and 'name' does not exist in type 'String'.

Simply put I need it to look kind of like this-

[morris4ever69]

Probably because you defined:

public names: String[] = [];

and now it’s not an array of strings. To simplify, try to replace the line with the following one to see if it solves the problem:

public names: any = [];

[georgehodges5]

Fantastic, it’s built and done exactly as I wanted. I’ve nearly been ripping my hair out over this yet it looks like such a simple solution. Thanks for your help.

Now just to add search which shouldn’t be too hard I hope!

[morris4ever69]

Glad to see that it helped you.

For the search feature, I would start by using the ionic Searchbar:

Ionic Framework

You can find examples in the docs and in the forum.

Good luck with your app!