Discussion :

[OtObOx]

Bonjour,

j'espère ne pas me tromper de forum...

Voilà le problème sur lequel j'ai buté toute la journée. Je développe une toute première appli hybride en utilisant une base SQLite et je cherche à formater un tableau comportant des catégories et des item dans ces catégories. En dur, cela donne ceci :

Dans le fichier .ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
setListe() {
    this.tabListe=[];
    this.tabListe.push({
      categorie: 'Catégorie 1', 
        articles: [
          {idListe: 0, article: 'Item 1'},
          {idListe: 1, article: 'Item 2'}
        ]
      }
    );
    this.tabListe.push({
      categorie: 'Catégories 2', 
      articles: [
          {idListe: 3, article: 'Item 3'},
          {idListe: 4, article: 'Item 4'}
          {idListe: 5, article: 'Item 5'}
        ]
      }
    );
}

Dans le fichier .html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<ion-list *ngFor='let cat of tabListe'>
  <ion-list-header color="primary">     
    {{ cat.categorie }}
  </ion-list-header>
  <ion-item  *ngFor='let art of cat.articles'>           
    {{ art.article }}             
  </ion-item>     
</ion-list>

Cela fonctionne

Là où ça se gâte, c'est lorsque je veux écrire le tableau tabListe avec SQLite. Je n'arrive pas à imbriquer les requêtes.

J'ai ces 2 tables :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
CATEGORIES (idCat INTEGER  NOT NULL PRIMARY KEY AUTOINCREMENT, Cat VARCHAR(50))
ARTICLES (idArt INTEGER  NOT NULL PRIMARY KEY AUTOINCREMENT, Intitule VARCHAR(50) NOT NULL, fkIdCat INTEGER, CONSTRAINT fk_1 FOREIGN KEY (fkIdCat) REFERENCES CATEGORIES(idCat)

Dans un premier temps, j'ai écrit ce code dans le fichier .ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var qDefCat = "SELECT CATEGORIES.idCat, CATEGORIES.Cat ";
this.dbase.executeSql(qDefCat, {})
  .then(res => {
    this.tabListe = [];
      for(var i=0; i<res.rows.length; i++) {
      // Requête sélection : sélectionner les articles de la catégorie courante
      var qDefArt = "SELECT * FROM ARTICLES WHERE fkIdCat=" + res.rows.item(i).idCat;
      this.dbase.executeSql(qDefArt, {})
        .then(resArt => {
          for(var j=0; i<resArt.rows.length; j++) {
            this.tabListe[i].articles.push({
              idArt: resArt.rows.item(j).idArt, 
              article: resArt.rows.item(j).Intitule, 
              qty: resArt.rows.item(j).qty
            });
          }
        })
    .catch(f => console.log("Erreur lors de la création de la requête Détail : " + f + " " + f.description));
    })
  .catch(e => console.log("Erreur lors de la création de la requête Liste : " + e + " " + e.description));

Mais cela ne fonctionne pas : en effet, les promesses de la sous liste n'ont pas le temps d'être exécutées, la boucle i continue sans attendre qu'elles le soient (enfin, si j'ai bien tout compris...)

J'ai tenté également de faire une seule requête avec tous les résultats et tenté de faire le tableau tabListe en regroupant les sous listes en fonction de la catégories :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var qDef = "SELECT CATEGORIES.idCat, CATEGORIES.Cat, ARTICLES.idArt, ARTICLES.Intitule, ARTICLES.fkIdCat ";
qDef = qDef + "FROM CATEGORIES INNER JOIN ARTICLES ON CATEGORIES.idCat = ARTICLES.fkIdCat ";
qDef = qDef + "ORDER BY CATEGORIES.Cat, ARTICLES.Intitule";

Mais dans ce cas, je n'arrive pas à imbriquer le sous tableau dans le tableau principal. Peut être la solution serait dans le fichier Html, mais les exemples que j'ai vu passent tous par un formatage d'un tableau + sous tableau.

Auriez-vous une piste pour m'aiguiller sur la bonne façon de faire ? J'ai vu pas mal de pages sur Google, mais je tourne en rond. Dans tous les exemples que j'ai regardés, le tableau est codé en dur et je n'ai pas vu d'exemple permettant de le faire. Cela doit être un problème classique, mais étant débutant dans la manipulation des données et leur affichage en html, je ne dois pas rentrer les bons mots-clés.

Merci,

JM