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 :
Dans le fichier .html :
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'} ] } ); }
Cela fonctionne
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>
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 :
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 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)
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...)
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));
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 :
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.
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";
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
Partager