Parse et remplissage de tableaux dynamiques

**claude.aignant** · 04/11/2018, 18h33

Bonjour à toutes et à tous,

Je bloque depuis plusieurs heures (je n'ose pas avouer 'plusieurs jours' avec parfois plus de 15 heures d'affilée, c'est ahurissant), sur deux soucis qui paraissent ridicules, mais carrément bloquants dans mon projet de développement final...

Je me résigne donc à vous soumettre le cas.

L'objectif : je copie-colle un code HTML (menu) depuis le source d'une page web (la mienne

, mais le format codé du menu est imposé car généré par un thème...), un menu à plusieurs niveaux, et souhaite traiter la chaîne pour alimenter des tableaux dynamiques afin de pouvoir alimenter 2 select liés et continuer le reste de mon dev....

Mais à force d'avoir la tête dans le guidon, je pense que je ne vois carrément plus rien.......

Mon 1er problème est déjà dans le traitement du code source (bouton 'lancer le split du code') : je récupère bien quelques données du menu, mais visiblement pas toutes....
Mon 2ème problème est dans l'alimentation d'un tableau javascript (bouton 'voir Menu'): mon tableau ne serait pas défini...

J'ai eu beau lire, relire, adapter, parcourir la plupart des tutos disponibles, rien à faire, je n'y parviens plus et suis désespéré.
La finalité de ces traitements est encore bien loin et je prends tellement de retard sur ces 2 malheureux soucis que j'en deviens malade..

C'est donc un GROS GROS appel à l'aide svp !!!!

Voici le code de ma page effectuant ces traitements problématiques (1ère étape cliquer sur 'lancer le split', puis 'voir Menu'):

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
 
<html>
<script language="javascript">
 
 
 
 
function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}
 
 
 
//var TaBMenu = new Array(10);
 
 
 
 
function GenererMenu(){
//récupère le code html du menu à parser
var chaine = document.form.codeorigine.value;
var newchaine = "";
 
//effecue divers traitements de mise en forme du code avant traitement
newchaine = chaine.replace(/\n|\r/g,''); // remplace tous les sauts de ligne par vide
newchaine = newchaine.replace(/	/g,''); // enlève les tabulations '	'
newchaine = newchaine.replace(/  /g,''); // supprime tous les doubles espaces compris dans une chaine
var reg = new RegExp("> <", "g"); newchaine = newchaine.replace(reg, "><"); // supprime tous les 1 espaces compris entre fin et debut de balise > <
 
 
 
x = 0;
var GlobalMenu = "";
//1/ Identifier les GRANDES CATEGORIES
//alert("Entree dans split pour générer GrandesSections");
var MorceauGrandesSections = newchaine.split('<span class="classmenu">');
var GrandesSections = "";
var SectionEnCours = "";
var TaBMenu = new Array(10);
	for (var i=0; i < MorceauGrandesSections.length-1; i++){
		  var evalueeMorceauGrandesSections = MorceauGrandesSections[i];
				var PosSectionEnCours = MorceauGrandesSections[i].lastIndexOf(">");
				SectionEnCours = MorceauGrandesSections[i].substring(PosSectionEnCours+1, MorceauGrandesSections[i].length);
				//alert("Section en cours (grande): " + SectionEnCours);
			GrandesSections = GrandesSections + i + " : " + SectionEnCours + "\n";
				GlobalMenu = GlobalMenu + "\n-GRANDE CATEGORIE =>" + SectionEnCours ;
 
				// insertion dans tableau des grandes catégories
				TaBMenu[i] = new Array(10);
				TaBMenu.push(SectionEnCours);
 
 
 
									// pour chaque grande catégorie, récupérer les sous-catégories
									var MorceauMoyennesSections = evalueeMorceauGrandesSections.split('</a><ul class="tadam">');
											var SectionEnCoursM = "";
												for (var x=0; x < MorceauMoyennesSections.length-1; x++){
													  var evalueeMorceauMoyennesSections = MorceauGrandesSections[i];
															var PosSectionEnCours = MorceauMoyennesSections[x].lastIndexOf(">");
															SectionEnCoursM = MorceauMoyennesSections[x].substring(PosSectionEnCours+1, MorceauMoyennesSections[x].length);
														GlobalMenu = GlobalMenu + "\n-MOYENNE CATEGORIE =>" + SectionEnCoursM ;
 
														//pour chaque element du tableau grandes categories, lister les sous-catégories
														TaBMenu[i][x]= SectionEnCoursM;
 
 
												//reste ici à traiter 1 niveau de profondeur du menu....
												//############################
												//############################
 
 
												} //end for moyennes catégories
 
 
 
 
				} //end for grandes catégories
 
 
 
 
//affecte la chaine traitee dans 2nd textarea pour verif visu
document.form.codetraite.value = newchaine; chaine = newchaine; newchaine = "";
// affiche arborescence GlobalMenu
alert("GlobalMenu vaut :\n" + GlobalMenu);
 
}
 
 
 
function AfficheTabMenu(){
 
var TabMenuTxt = "";
 
// récupère les éléments des tableaux pour afficher menu dans alert()
for(var i=0; i<TaBMenu.length; i++)
   for(var j=0; j<TaBMenu[j].length; j++)
      TabMenuTxt = "Case "+ i + "-" + j +" : "+ TaBMenu[i][j] + "\n";
 
 
alert(TabMenuTxt);
 
 
 
 
}
 
 
 
 
 
 
</script>
 
 
 
 
<br><br><center><b>RECONSTRUCTION DU MENU</b></center>
<form name="form">
 
<br>
<br>
 
<center>Arborescence copiée-collée:<br>
  <textarea cols="100" rows="16" name="codeorigine">
 <li thecat="cat1" class="padampadam" gotpop="true">
<a href="/Grande-categ-1">Grande categ 1
<span class="classmenu"><i class="badaboom" tohide="true"></i></span></a> 	
 
<ul class="toctoc"><li ><a href="/Sous-categ-1-de-Grande-categ-1">Sous-categ 1 de Grande categ 1
</a><ul class="tadam">
 
<li ><a href="/1-de-Sous-categ-1-de-Grande-categ-1">1 de Sous-categ 1 de Grande categ 1</a></li>
<li ><a href="/2-de-Sous-categ-1-de-Grande-categ-1">2 de Sous-categ 1 de Grande categ 1</a></li>
<li ><a href="/3-de-Sous-categ-1-de-Grande-categ-1">3 de Sous-categ 1 de Grande categ 1</a></li>
<li ><a href="/4-de-Sous-categ-1-de-Grande-categ-1">4 de Sous-categ 1 de Grande categ 1</a></li></ul></li>
 
<li ><a href="/Sous-categ-2-de-Grande-categ-1">Sous-categ 2 de Grande categ 1</a>
<li ><a href="/1-de-Sous-categ-2-de-Grande-categ-1">1 de Sous-categ 2 de Grande categ 1</a></li>
<li ><a href="/2-de-Sous-categ-2-de-Grande-categ-1">2 de Sous-categ 2 de Grande categ 1</a></li>
<li ><a href="/3-de-Sous-categ-2-de-Grande-categ-1">3 de Sous-categ 2 de Grande categ 1</a></li>
<li ><a href="/4-de-Sous-categ-2-de-Grande-categ-1">4 de Sous-categ 2 de Grande categ 1</a></li>
 
 
<li ><a href="/Sous-categ-3-de-Grande-categ-1">Sous-categ 3 de Grande categ 1
</a><ul class="tadam">
 
 
<li ><a href="/1-de-Sous-categ-3-de-Grande-categ-1">1 de Sous-categ 3 de Grande categ 1</a></li>
<li ><a href="/2-de-Sous-categ-3-de-Grande-categ-1">2 de Sous-categ 3 de Grande categ 1</a></li>
<li ><a href="/3-de-Sous-categ-3-de-Grande-categ-1">3 de Sous-categ 3 de Grande categ 1</a></li>
<li ><a href="/4-de-Sous-categ-3-de-Grande-categ-1">4 de Sous-categ 3 de Grande categ 1</a></li></ul></li>
 
 
 
<li thecat="cat2" class="padampadam" gotpop="true">
<a href="/Grande-categ-2">Grande categ 2
<span class="classmenu"><i class="badaboom" tohide="true"></i></span></a> 	
 
<ul class="toctoc"><li ><a href="/Sous-categ-1-de-Grande-categ-2">Sous-categ 1 de Grande categ 2
</a><ul class="tadam">
 
<li ><a href="/1-de-Sous-categ-1-de-Grande-categ-2">1 de Sous-categ 1 de Grande categ 2</a></li>
<li ><a href="/2-de-Sous-categ-1-de-Grande-categ-2">2 de Sous-categ 1 de Grande categ 2</a></li>
<li ><a href="/3-de-Sous-categ-1-de-Grande-categ-2">3 de Sous-categ 1 de Grande categ 2</a></li></ul></li>
 
<li ><a href="/Sous-categ-2-de-Grande-categ-2">Sous-categ 2 de Grande categ 2</a>
<li ><a href="/1-de-Sous-categ-2-de-Grande-categ-2">1 de Sous-categ 2 de Grande categ 2</a></li>
<li ><a href="/2-de-Sous-categ-2-de-Grande-categ-2">2 de Sous-categ 2 de Grande categ 2</a></li>
<li ><a href="/3-de-Sous-categ-2-de-Grande-categ-2">3 de Sous-categ 2 de Grande categ 2</a></li>
 
 
<li ><a href="/Sous-categ-3-de-Grande-categ-2">Sous-categ 3 de Grande categ 2
</a><ul class="tadam">
 
 
<li ><a href="/1-de-Sous-categ-3-de-Grande-categ-2">1 de Sous-categ 3 de Grande categ 2</a></li>
<li ><a href="/2-de-Sous-categ-3-de-Grande-categ-2">2 de Sous-categ 3 de Grande categ 2</a></li>
<li ><a href="/3-de-Sous-categ-3-de-Grande-categ-2">3 de Sous-categ 3 de Grande categ 2</a></li>
<li ><a href="/4-de-Sous-categ-3-de-Grande-categ-2">4 de Sous-categ 3 de Grande categ 2</a></li></ul></li>
 
 
 
 
 
<li thecat="cat3" class="padampadam" gotpop="true"><a href="/Grande-categ-3">Grande categ 3
<span class="classmenu">
<i class="badaboom" tohide="true"></i></span></a>
<ul class="toctoc">
 
<li ><a href="/Sous-categ-1-de-Grande-categ-3">Sous-categ 1 de Grande categ 3
</a><ul class="tadam">
 
<li ><a href="/Sous-categ-2-de-Grande-categ-3">Sous-categ 2 de Grande categ 3</a></li>
<li ><a href="/Sous-categ-3-de-Grande-categ-3">Sous-categ 3 de Grande categ 3</a></li>
<li ><a href="/Sous-categ-4-de-Grande-categ-3">Sous-categ 3 de Grande categ 4</a></li>
  </textarea><br>
  <input type="button" OnClick="GenererMenu()" value="Lancer le split du code">
  <br>
  <textarea cols="100" rows="16" name="codetraite">code traité...</textarea><br>
  <input type="button" OnClick="AfficheTabMenu()" value="Voir MENU"></center>
 
</center>
</form>
 
 
</html>

Pardonnez la lourdeur du code JS en certains endroits, je m'y remet un peu après de longues années de jachère, et j'ai déjà enlevé beaucoup de choses inutiles avant de me décider à demander de l'aide, mais là je sature complètement !

Mille merci pour toute l'aide (et le gain de temps) que vous pourriez m'apporter.
Je sature totalement et me bats pour ne pas céder à la crise de nerfs, mais çà devient de plus en plus difficile, je suis KO.

**psychadelic** · 04/11/2018, 22h55

quel est le contexte ?
ton code JS doit s'exécuter sur sa propre page pour en fournir le menu présent, sous forme d'un tableau ?
un tableau comment ?
parce qu'un tableau , c'est pas très adapté pour rendre compte de la réalité d'un menu html, il faut au moins 2 dimensions, mais la encore c'est pas génial pour indiquer les liens et leurs libellé
Pourquoi pas utiliser un format JSON ?

pourquoi le code JS est placé directement des la 2eme ligne de ton html ?

pourquoi ce code html n'utilidse pas de header?

Pourquoi ne pas utiliser les instruction "Nodes" de Javascript ? ça me semble quand même plus simple que d'écrire un parseur...
https://developer.mozilla.org/fr/docs/Web/API/Node

a quoi resemble le html du menu ?
c'est ce que tu a mis en fin du code présenté?

pourquoi dans la partie "menu" ça commence par une une balise <li> sans avoir de balise <ul> qui la précède ?

pourquoi le code que tu nous présente est aussi mal fichu ?
- c'est pour qu'on puisse perdre beaucoup de temps pour te comprendre et qu'ainsi cela te fera gagner du temps ?

**CosmoKnacki** · 04/11/2018, 23h10

Ton plus gros problème est que le code html que tu essaies de parser est mal structuré, il manque certaines balises, c'est pour cette raison d'ailleurs que tu ne trouves pas la deuxième sous-catégorie et que ça saute directement à la troisième. Et puis surtout indente ton code car c'est illisible et par conséquent beaucoup plus difficile à débuguer.

**claude.aignant** · 05/11/2018, 09h32

Bonjour,

Déjà, un grand merci à vous deux de vous être penché sur mon cas de problématiques.

Les questions sont très pertinentes, mon message était déjà long, je ne voulais pas surcharger :

Envoyé par psychadelic

1/ quel est le contexte ?

Sur une boutique en ligne Shopify, un menu est généré depuis un thème installé sur lequel je n'ai pas la main sur le rendu ou la mise en forme du code source.
Pour pallier à quelques limites natives de la boutique (Shopify) dans les moyens d'organiser les catégories et filtrer les produits, j'ai intégré à mes pages de listing produits un système de filtrage, créé à la volée, des produits affectés à la catégorie/sous-catégorie affichée, au moyen de divers attributs (que je crée et complète au gré de l'ajout de chacun de mes produits), attributs affectés via des tags. Ces tags doivent également être affectés aux produits en fonction des catégories parentes auquel il appartient...
Si cette solution fonctionne techniquement en terme de filtrage ou d'affectation aux catégories/sous-catégories (limitées à 3 niveaux, d'où mon problème), elle n'en reste pas moins très laborieuse (grand catalogue produits, grand menu), chronophage et source d'erreur car de nombreux tags doivent être reproduits pour chaque produit, et aucune solution actuellement pour lister quelque part les tags de critères utilisables...
Vu le nombre de critères sur certains produits (matière, forme, couleur, etc...) toute erreur de frappe empêcherait naturellement la détection du tag et donc son affichage...

Envoyé par psychadelic

2/ ton code JS doit s'exécuter sur sa propre page pour en fournir le menu présent, sous forme d'un tableau ?
un tableau comment ?

L'objectif est de créer un développement indépendant, qui me permettrait de récupérer le source généré à l'affichage de mon menu d'une part (pour récupérer et générer les tags produits liés aux catégories du produit concernées), et ajouter aux tags d'un produit un nombre encore indéfini de tags (critères). Cet outil me permettant de générer les tags à affecter à mes produits, il me suffit de copier-coller la liste des tags générés lors de l'ajout d'un produit sur la boutique.

Envoyé par psychadelic

3/ parce qu'un tableau , c'est pas très adapté pour rendre compte de la réalité d'un menu html, il faut au moins 2 dimensions, mais la encore c'est pas génial pour indiquer les liens et leurs libellé

Je ne cherche donc pas à reproduire (en terme d'affichage) un menu ou son effet, mais uniquement lister les catégories sur les 3 niveaux (selects liés évidemment) afin de générer les tags qui vont bien lors de la création d'une fiche produit.

Envoyé par psychadelic

4/ Pourquoi pas utiliser un format JSON ?

Je ne connais pas du tout, et me sens plus à l'aise avec Javascript, pour lequel un tableau à X dimensions me semblait amplement suffisant et puissant pour arriver à mes fins.

Envoyé par psychadelic

5/ pourquoi le code JS est placé directement des la 2eme ligne de ton html ?

Cette page-outil ne sera jamais sur internet, je ne sais pas comment l'intégrer à ma boutique et celà rajouterait beaucoup de complexité au projet.
Je m'attachais plus, dans un premier temps, à vérifier que je pouvais obtenir un code fonctionnel.

Envoyé par psychadelic

6/ pourquoi ce code html n'utilidse pas de header?

L'ajout de ces balises n'était pas bloquant dans le traitement d'un simple formulaire et la vérification que je pouvais fonctionnellement obtenir le traitement attendu.

Envoyé par psychadelic

7/ Pourquoi ne pas utiliser les instruction "Nodes" de Javascript ? ça me semble quand même plus simple que d'écrire un parseur...
https://developer.mozilla.org/fr/docs/Web/API/Node

Je ne maîtrise pas la génération du code du menu, généré via un thème...
Et peut-être qu'un jour, cette génération changera avec un nouveau thème ou menu, et je pourrai plus facilement adapter la méthode de parse.

Envoyé par psychadelic

8/ a quoi resemble le html du menu ?
c'est ce que tu a mis en fin du code présenté?

Oui, tout à fait.... J'ai bien vu qu'il n'est pas parfait, loin s'en faut, mais il n'est pas de moi et je n'ai actuellement pas d'autre choix (pour des questions de budget, de temps et autre...) que de devoir me servir de ce qui m'est disponible.

Envoyé par psychadelic

9/ pourquoi dans la partie "menu" ça commence par une une balise <li> sans avoir de balise <ul> qui la précède ?

La balise <ul> est bien présente dans le code source originel, mais comme je ne la traite pas en soit dans la partie de code que je copie-colle et traite (et de la façon dont je le traite, pour ce type de récupération des éléments de menu), je ne l'ai pas ajoutée dans le code-source à traiter donné en exemple (à tord en effet, structurellement parlant)

Envoyé par psychadelic

10/ pourquoi le code que tu nous présente est aussi mal fichu ?
- c'est pour qu'on puisse perdre beaucoup de temps pour te comprendre et qu'ainsi cela te fera gagner du temps ?

Beaucoup de gênance dans cette dernière remarque, je suis sincèrement désolé...
S'il s'agit du code JS, c'est totalement de mon ressort, j'en suis responsable....
J'ai essayé plusieurs solutions tour à tour, m'y suis arraché les cheveux nombre de fois, structurellement le code JS a un peu souffert au gré de mes essais infructueux et qui me semblaient pourtant si logiques... Et encore, j'ai fais un sérieux coup de ménage dans le JS, mais ce n'est pas parfait c'est sûr, cela fait 15 ans que je n'ai pas pratiqué!!
Pour ce qui est du code HTML récupéré de la boutique et copié-collé, je n'ai pas le choix....
Il me semble aussi sacrément mal fichu et mal structuré, mais je n'ai pas le choix, je dois avancer avec.

Invité · 05/11/2018, 11h22

Bonjour,

Il manque plusieurs balises fermantes (</li>, </ul>) dans le code du menu.

Envoyé par claude.aignant

...je copie-colle un code HTML (menu) depuis le source d'une page web (la mienne

, mais le format codé du menu est imposé car généré par un thème...)...

Et tu prétends que "tu n'as pas le choix" ?
Je doute que ce soit "le thème" qui ajoute des classes "badaboom", "toctoc" ou "tadam"...

Tant que le code HTML n'est pas valide, tu n'arriveras pas à le parser correctement.
Commence par corriger le code du menu.

N.B. Puisque tu parles de "thème", merci de préciser s'il s'agit d'un site WordPress ou autre.
Ça ferait gagner du temps...

**CosmoKnacki** · 05/11/2018, 11h40

Déjà poste le vrai code html sans aucune modification de ta part, pour qu'on puisse voir la structure (essaye de choper la balise ouvrante ul avant les items jusqu'à sa fermeture après).

**psychadelic** · 05/11/2018, 12h35

halucinant!
je te demande le contexte de travail, pas de nous raconter ta vie.

L'objectif : je copie-colle un code HTML (menu) depuis le source d'une page web (la mienne

Quel est l’intérêt de copier coller ton propre code source, et dans quoi, un appli nodeJS de ton cru (puisque c'est du NodeJS)

- détaille les étapes (uniquement technique)
- indique des exemple de sources (des liens, pas des pages de codes)
- donnes un(ou des) exemple(s) du résultat recherché, de manière courte et signifiante(s)

**claude.aignant** · 05/11/2018, 12h45

Envoyé par jreaux62

Bonjour,

Il manque plusieurs balises fermantes (</li>, </ul>) dans le code du menu.

Et tu prétends que "tu n'as pas le choix" ?
Je doute que ce soit "le thème" qui ajoute des classes "badaboom", "toctoc" ou "tadam"...

Tant que le code HTML n'est pas valide, tu n'arriveras pas à le parser correctement.
Commence par corriger ça.

Bonjour,

Merci de t’intéresser au problème.
Evidemment le nom de ces classes a été remplacé, par des noms bidons qui n'apportent rien au problème posé.
Car c'est la logique de la récupération qui m'intéresse, pas le nom des class qui en soi n'ont aucun sens.
Comme déjà précisé, ce code est généré par un développement tiers, que je ne maîtrise pas et que je ne peux m'aventurer à modifier.
Je l'ai donc déjà 'corrigé' en supprimant nombre de balises inutiles que j'ai déjà écarté du source fourni, et raccourci les noms de class pour améliorer la lisibilité du code source, mais je ne peux guère faire mieux.
Je ne "prétends" pas ne pas avoir le choix, je donne la contrainte qui s'impose à moi : je DOIS utiliser ce que j'ai...
Donc, sans tenir compte des liens bidons (qui devraient tous être différents évidemment) ou des produits, voici le code source brut généré par ce thème (pur copié-collé sans retouche aucune) que je dois traiter :

Code HTML :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
      <ul class="site-nav nav-position-2" id="accessibleNav">
 
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
 
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
 
 
 
	<ul class="site-nav--dropdown ">
 
 
      <li >
 
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
 
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 1.1.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
 
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectZ">Sous-Catégorie 1.3</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.1</a></li>
 
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 1.3.2</a></li>
 
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 1.3.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/products/produitOPD">Sous-Catégorie 1.4</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.4</a></li>
 
        </ul>
      </li>
 
 
    </ul>
 
 
  </li>
 
 
 
  <li data-dropdown-rel="categorie-2" class="site-nav--has-dropdown" aria-haspopup="true">
 
    <a  href="/collections/collectionX">Catégorie 2
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
 
 
 
	<ul class="site-nav--dropdown ">
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 2.1</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 2.2</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 2.3</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 2.3.1</a></li>
 
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.2</a></li>
 
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.3.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 2.4</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.4</a></li>
 
        </ul>
      </li>
 
 
    </ul>
 
 
  </li>
 
 
 
  <li data-dropdown-rel="categorie-3" class="site-nav--has-dropdown" aria-haspopup="true">
 
    <a  href="/collections/collectionX">Catégorie 3
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
 
 
 
	<ul class="site-nav--dropdown ">
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 3.1</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 3.2</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.2.1</a></li>
 
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 3.2.2</a></li>
 
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.3</a></li>
 
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 3.3</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.2</a></li>
 
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 3.3.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.4</a></li>
 
        </ul>
      </li>
 
 
 
      <li >
 
        <a href="/collections/collectionX">Sous-Catégorie 3.4</a>
 
        <ul class="site-nav--dropdown site-nav--submenu">
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.1</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.2</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.3</a></li>
 
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.4</a></li>
 
        </ul>
      </li>
 
 
    </ul>
 
 
  </li>
 
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
 
</ul>

Merci encore de votre aide

Invité · 05/11/2018, 13h15

1- Sans vouloir te vexer, au lieu de faire du bidouillage, tu aurais dû montrer TOUT DE SUITE ce code.
une fois correctement indenté, ça donne :

Code html :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<ul class="site-nav nav-position-2" id="accessibleNav">
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 1.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 1.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 1.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/products/produitOPD">Sous-Catégorie 1.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-2" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 2
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 2.3.1</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 2.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 2.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 2.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li data-dropdown-rel="categorie-3" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 3
      <span class="icon-fallback-text">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span></a>
 
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.1.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.2.1</a></li>
          <li ><a href="/collections/collectZ">Sous-Sous-Catégorie 3.2.2</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.3</a></li>
          <li ><a href="/products/produitOPD">Sous-Sous-Catégorie 3.2.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.3</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.2</a></li>
          <li ><a href="/collections/collectionX-1">Sous-Sous-Catégorie 3.3.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.3.4</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectionX">Sous-Catégorie 3.4</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.3</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 3.4.4</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
</ul>

On constate qu'il est... VALIDE !
Et que c'est donc TOI qui, avec tes bidouillages, avait supprimé des balises "utiles".

2- Maintenant, concernant le JavaScript :

JETTE ton usine à gaz.
Et intéresse-toi à : DOMParser

L'interface DOMParser permet d'analyser le code source XML ou HTML à partir d'une chaîne dans un Document DOM.
ou en jQuery :jQuery.parseHTML()

**claude.aignant** · 05/11/2018, 15h28

Bonjour,

- pour jreaux62 :
Je ne suis pas vexé, j'accepte humblement d'être particulièrement débutant et vous demande un minimum de tolérance, même si je suis conscient que je ne suis pas le premier et que vous perdez régulièrement du temps à obtenir les bonnes infos de ceux qui ont besoin d'aide.
Je suis désolé d'avoir tronqué un code initialement valide, vous avez désormais le source d'origine dans mon précédent post.

- Pour psychadelic : il est dommage que tu ne m'aies à priori lu que partiellement : tu parles d'une appli nodeJS de mon cru, ce qui est faux, comme je l'ai exposé : l'intérêt de copier-coller le code dans mon cas, est précisément que ce n'est pas moi qui le génère mais un thème installé sur ma boutique, mon menu n'est consultable que lorsqu'il est exécuté sur la boutique. Donc je copie-colle le source du menu obtenu et tente d'exploiter la source HTML par des moyens qui sont à ma portée (il est vrai très limitée)...
J'aurai bien fourni des exemples, mais le site n'est pas encore en ligne, et ma demande est (dans le concept) simple : je veux récupérer l'arborescence de mon menu dans un/des tableaux à X dimensions et insérer les données dans des select liés, afin de pouvoir générer une chaîne composée de plusieurs tags issus notamment du nom des catégories et sous-catégories (les liens aucun intérêt).

- pour CosmoKnacki : merci, je l'ai fais :-)

- pour jreaux62 : merci pour avoir nettoyé le source en l'indentant comme il faut

. Je crois l'avoir déjà précisé mais il s'agit d'un thème Shopify (la boutique n'est pas en ligne). Merci aussi pour les pistes DOMParser et jQuery.parseHTML() , qui semblent en effet être parfaitement adaptées.
Mais je vais être honnête, après consultation, elles me paraissent carrément hors de ma portée techniquement (d'où mes tentatives en JS seulement).
Je ne sais même pas comment faire pour pouvoir les exploiter (un truc à installer quelque part?).

Bref, vous vous en doutez, j'ai aujourd'hui un niveau qui ne me permet pas de faire des folies en développement (les pros disent bidouillage...), d'ailleurs vous l'aurez constaté de par les 2 soucis que je rencontre : boucler là où il faut, alimenter (déclarer même...) un tableau à X dimensions...

Mais je cherchais à faire simple, efficace et rapide, propre, mais surtout à ma portée techniquement

Je pensais franchement pouvoir y arriver en JS en débloquant ces 2 soucis, mais si vous ne voyez que des applis comme DOMParser et jQuery.parseHTML() pour y parvenir, je suis vraiment mal barré

et ce serait tout mon projet professionnel qui serait remis en cause

.

Invité · 05/11/2018, 15h45

Rassure-toi :

j'aboie souvent, mais ne mords que très rarement.

je veux :

récupérer l'arborescence de mon menu dans un/des tableaux à X dimensions
et insérer les données dans des select liés,
afin de pouvoir générer une chaîne composée de plusieurs tags issus notamment du nom des catégories et sous-catégories (les liens aucun intérêt).

Puisque tu "sais" ce que tu veux/dois récupérer, essayons de raisonner à l'envers : MONTRE effectivement QUEL RESULTAT tu veux obtenir.

On peut par exemple se baser sur un exemple simplifié :

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
22
23
24
25
26
27
28
29
30
31
32
33
<ul class="site-nav nav-position-2" id="accessibleNav">
 
  <li data-dropdown-rel="categorie-1" class="site-nav--has-dropdown" aria-haspopup="true">
    <a  href="/collections/collectionX">Catégorie 1
      <span class="icon-fallback-text"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
 
    <ul class="site-nav--dropdown ">
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
        </ul>
      </li>
 
      <li >
        <a href="/collections/collectZ">Sous-Catégorie 1.2</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.2.1</a></li>
          <li ><a href="/products/produitSZ">Sous-Sous-Catégorie 1.2.2</a></li>
        </ul>
      </li>
 
    </ul>
 
  </li>
 
  <li class="customer-navlink large--hide"><a href="/account/login" id="customer_login_link">Connexion</a></li>
  <li class="customer-navlink large--hide"><a href="/account/register" id="customer_register_link">Créer un compte</a></li>
 
</ul>

A partir de ça :

Montre le code des <select> que tu veux obtenir
Montre la "chaîne composée de plusieurs tags" (là, je ne vois pas de quoi tu parles...)

Une fois qu'on sauras ce qu'il faut obtenir, peut-être qu'on pourras te dire COMMENT y parvenir.

**claude.aignant** · 05/11/2018, 15h52

Envoyé par jreaux62

Rassure-toi :

j'aboie souvent, mais ne mords que très rarement.

Tu m'as fais bien rire, et je suis presque soulagé !!!
C'est un peu impressionnant de devoir se justifier face à des pros qui trouvent nos méthodes tellement peu efficaces par rapport à ce qu'un bon développeur pourrait mettre en oeuvre...
Et c'est vrai que je suis sous pression depuis tellement de jours, j'en deviens d'autant plus sensible, mais j'implore votre aide...
Sans exagérer, le contexte de la mise en oeuvre de ce site est particulièrement vital pour moi, j'espère trouver une issue favorable avec vous car tout seul je ne m'en sortirai pas (pour le code, le reste je gère autant que possible).

**claude.aignant** · 05/11/2018, 15h53

Envoyé par jreaux62

...Puisque tu "sais" ce que tu veux/dois récupérer, essayons de raisonner à l'envers : MONTRE effectivement QUEL RESULTAT tu veux obtenir...

OK, je m'y colle de suite!!!

Invité · 05/11/2018, 15h58

Tant mieux si je t'ai fait rire

Va d'abord prendre un grand bol d'air frais.

Ça ne sert à rien de garder la tête dans le guidon : c'est le meilleur moyen d'aller droit dans le mur.

N.B. Tu n'as aucun besoin de te "justifier".
Tout ce qu'on demande, c'est que tu fournisses les informations nécessaires et suffisantes à la résolution du problème.

**claude.aignant** · 05/11/2018, 16h53

OK

Alors voilà ci-après, sans prétention aucune (désolé je manque vraiment de bases en 'indentation'), ce qui marche et ce que je souhaite faire.
Donc rien de fonctionnel dans le code ci-dessous, c'est juste pour permettre un aperçu visuel (mon code est tellement moche vous y perdriez vos yeux, et de plus sans intérêt pour la résolution de ce que je compte faire...).

Voici :

Code html :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<center><b>CE QUI FONCTIONNE ACTUELLEMENT :</b></center>
<br><br>J'ai une (voire plusieurs) liste(s) de critères : 
<SELECT NAME="CaractéristiquesProduit" id="Attribut01" <!--onChange="ChoixAttribut(this.id,this.value)"-->>
	<OPTION>-- Choisissez un attribut ---</OPTION>
	<OPTION>Caractère</OPTION>
	<OPTION>Destinataire</OPTION>
	<OPTION>Couleur</OPTION>
	<OPTION>Matière</OPTION>
</SELECT>
<br><br>Lorsque je sélectionne un des attributs ci-dessus, le contenu d'un second select est automatiquement modifié en JS via un switch case en fonction des données disponibles pour ce critère :
	<font size='1'>
	<br>case "Caractère" : var txt = new Array ('Personnalisable', 'Non personnalisable'); break;
	<br>case "Destinataire" : var txt = new Array ('Homme', 'Femme', 'Ado', 'Enfant',); break;
	<br>case "Couleur" : var txt = new Array ('Rouge', 'Vert', 'Or', 'Argent', 'Noir', 'Jaune', 'Bleu', 'Transparent', 'Violet'); break;
	<br>case "Matière" : var txt = new Array ('Métal', 'Titane', 'Acier', 'Acier Inoxydable', 'Alliage', 'Or 18K', 'Or Blanc', 'Or Jaune 18K', 'Or Rose', 'Argent 925'); break;
	</font>
 
	<br><SELECT multiple id="Valeur01" <!--OnChange="ChoixValeurs(this.id);"--> size="1"><br>
			<OPTION>-- Choisissez une ou plusieurs valeurs pour cet attribut---</OPTION>
			<OPTION>Vert</OPTION>
			<OPTION>Bleu</OPTION>
			<OPTION>Jaune</OPTION>
			<OPTION>...</OPTION>
		</SELECT>
<br><br>Au clic sur une ou plusieurs valeurs de ce second select, un textarea se remplit (ou se vide) en fonction des données sélectionnées/désélectionnées, pour prendre la forme qui suit :
<br>
<textarea cols="60" rows="5" id="ConcatTousCriteres">Caractère_Personnalisable,Destinataire_Femme,Destinataire_Enfant,Couleur_Bleu,Couleur_Violet,Matière_Métal,Matière_Alliage,</textarea>
 
<br><br>
Dans l'idéal, j'aurai aimé que les critères/valeurs/options sélectionnées (présentes dans 'ConcatTousCriteres') soient en selected mais je n'y suis pas parvenu (ou en couleur vert/noir...)
<br><br>
 
<br><br><center><b>CE QUE JE CHERCHE A FAIRE DESORMAIS :</b></center><br>
 
<br>Je souhaite désormais récupérer l'arborescence complète de mon menu dans 3 select liés (car beaucoup de sous-categ), alimentés en fonction du source HTML de mon menu :
 
<br><SELECT NAME="ArboCateg" id="ArboCateg" <!--OnChange="Actualise(ArboSouscateg);AjouteOuSupprimeTagEtSelectedOptionsChoisies()"-->>
		<OPTION>-- Choisissez une catégorie ---</OPTION>
		<OPTION>Catégorie 1</OPTION>
		<OPTION>Catégorie 2</OPTION>
		<OPTION>Catégorie 3</OPTION>
	</SELECT>
	<input type="button" OnClick="AjouterAuxtagsProduit()" value="Ajouter catégorie">
 
<br><SELECT NAME="ArboSousCateg" id="ArboSousCateg" <!--OnChange="Actualise(ArboSousSouscateg);AjouteOuSupprimeTagEtSelectedOptionsChoisies()"-->>
		<OPTION>-- Choisissez une sous-catégorie (liée à ArboCateg) ---</OPTION>
		<OPTION>Sous-Catégorie 1</OPTION>
		<OPTION>Sous-Catégorie 2</OPTION>
		<OPTION>Sous-Catégorie 3</OPTION>
	</SELECT>
	<input type="button" OnClick="AjouterAuxtagsProduit()" value="Ajouter sous-catégorie">
 
<br><SELECT NAME="ArboSousSousCateg" id="ArboSousSousCateg" <!--OnChange="Actualise(ArboSouscateg);AjouteOuSupprimeTagEtSelectedOptionsChoisies();" -->>
		<OPTION>-- Choisissez une sous-sous-catégorie (liée à ArboSousCateg) ---</OPTION>
		<OPTION>Sous-sous-Catégorie 1</OPTION>
		<OPTION>Sous-sous-Catégorie 2</OPTION>
		<OPTION>Sous-sous-Catégorie 3</OPTION>
	</SELECT>
	<input type="button" OnClick="AjouterAuxtagsProduit()" value="Ajouter sous-sous-catégorie">
 
<br><br>Et via un bouton d'action lié à chacun des 3 selects (donc 3 boutons), pouvoir ajouter des tags de type 'Catégorie 1' ou/et 'Sous-Sous-Catégorie 3' à ma liste de tags 'ConcatTousCriteres', qui aurait alors la forme :
<br><textarea cols="60" rows="5" id="ConcatTousCriteres">Caractère_Personnalisable,Destinataire_Femme,Destinataire_Enfant,Couleur_Bleu,Couleur_Violet,Matière_Métal,Matière_Alliage,Catégorie_Catégorie 1,Catégorie_Sous-Sous-Catégorie 3,</textarea>
 
<br><br>Et pouvoir désélectionner l'une ou l'autre des options, pour la voir se supprimer automatiquement de 'ConcatTousCriteres'.
<br>Et là aussi, dans l'idéal, j'aurai aimé que les catégories/options sélectionnées (présentes dans 'ConcatTousCriteres') soient en selected mais je n'y suis pas parvenu (ou en couleur vert/noir...)
<br>Voila l'idée....
 
</html>

Invité · 05/11/2018, 17h42

Bon.
Cette fois, je sens que je vais vraiment te vexer...

Connais-tu la définition du mot "simple" ?

On te demande un code SIMPLE, tu nous renvoies un meli-melo de code et de commentaires qui n'ont rien à faire là.

Et qu'est-ce que c'est que ces boutons "Ajouter une catégorie", "Ajouter une sous-catégorie",... ??

Tu m'étonnes que tu t'arraches les cheveux depuis plusieurs jours...

Dans CETTE discussion, on ne va traiter QUE de la problématique (comme c'est indiqué dans le 1er message) :

"parser un code HTML"
"remplissage de tableaux dynamiques" (ici : mettre le résultat du parsage dans un array JavaScript)

**psychadelic** · 05/11/2018, 18h41

Envoyé par claude.aignant

OK

Alors voilà ci-après, sans prétention aucune .....

On ne vois toujours pas le moindre tableau...

https://developer.mozilla.org/fr/doc..._globaux/Array

**Beginner.** · 05/11/2018, 19h33

Salut,

- Il y a quelques temps je voulais aussi analyser du code HTML (j'avais ouvert ce fil : Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?)... J'en suis aussi arrivé à la conclusion qu'il fallait que j'utilise un parser. J'en ai regardé plusieurs mais si on n'a pas besoin d'ajouter des fonctionnalités particulières, si le code HTML est relativement propre...etc Eh bien tu peux utiliser un parser natif, j'en parlais justement dans mon dernier message #11...

Il s'agit du parser que jreaux62 a déjà mentionné...

- Ceci dit tu peux aussi simplement remplacer ta <textarea> par une simple <div> (que tu peux rendre invisible si besoin), le code html sera alors parsé automatiquement par le navigateur et alors tu auras accès à toute les méthodes du DOM dont psychadelic t'a parlées...

---> Bon après ça c'est parce que tu fais un copier/coller du "menu" qui je suppose est généré automatiquement par ton site ou autre alors c'est dommage de devoir faire un copier/coller à chaque fois, il n'y a pas moyen de récupérer automatiquement le code HTML généré de ce menu ? Si par exemple tu peux ajouter ton code JS dans la page pour pouvoir récupérer le code HTML tu pourrais travailler directement dessus...

Enfin bref cela m'étonne que ce ne soit pas fait automatiquement, j'ai du mal à imaginer le truc : si le menu est différent à chaque fois selon les données entrées par les utilisateurs alors comment vas-tu faire ? Tu ne peut pas être toujours là à faire un copier/coller ou bien j'ai rien compris ???

---> Sinon d’après ce que j'ai compris tu ne cherches pas vraiment à construire un tableau dynamiquement, ce que tu veux c'est construire automatiquement trois menus déroulants (liés) à partir du code HTML (une liste avec des <ul> et des <li>) correspondant au menu, c'est ça ?
Si c'est ça eh bien c'est beaucoup plus simple à faire avec les méthodes du DOM et pour ça tu peux faire une des deux choses rappelées ci-dessus...

**claude.aignant** · 05/11/2018, 22h01

Envoyé par jreaux62

Bon.

Dans CETTE discussion, on ne va traiter QUE de la problématique (comme c'est indiqué dans le 1er message) :

"parser un code HTML"
"remplissage de tableaux dynamiques" (ici : mettre le résultat du parsage dans un array JavaScript)

Bon, non je ne vais pas me vexer, mais on me demande un aperçu du résultat (tel que je le conçevais), ce que je me suis appliqué à faire (mal visiblement).
Vous voulez du code, j'aimerai tellement vous en donner, mais je suis manifestement incapable de le produire 'correctement', je ne vais donc pas m'y risquer une nouvelle fois, çà vous pique les yeux et ce serait vos prochaines remontées dessus qui finiront par me vexer réellement (déjà je ne suis pas très sûr de moi, j'arrive à bidouiller, je prends sur moi de solliciter de l'aide, malgré le retour de bâtons auquel je m'attendais forcément, et dans mon état de stress vu l'urgence de la situation çà mettrait tout mon projet en faillite)...

"parser un code HTML" : oui, j'ai besoin de parser 'correctement' un code HTML, déjà communiqué plus haut : à part vous répondre que les 2 API sont clairement adhoc mais à mon sens inaccessibles à mon niveau, que puis-je fournir d'autre comme éléments, puisque ceux communiqués suffisent pour évaluer des pistes qui seraient -idéalement- plus accessibles?
"remplissage de tableaux dynamiques" (ici : mettre le résultat du parsage dans un array JavaScript) : c'est en effet tout l'énoncé du 2nd problème, qui suppose de toute façon que le 1er soit résolu.... et ce que j'ai déjà produis ne fonctionne pas : je ne peux là encore pas vous donner un autre début de code cohérent, voire même le tableau qu'attend psychadelic, car il a toutes les chances de ne pas matcher avec votre façon d'envisager le problème...

Enfin pour répondre à Beginner, je veux effectivement, après avoir résolu mon souci de parse d'un menu, construire 'automatiquement' trois menus déroulants (liés) à partir du code HTML (depuis une liste avec des <ul> et des <li> comme tu dis, mais ouvert à toute autre suggestion) correspondant au menu. Mais je suis incapable (faute de compétences) d'intégrer ce développement à mon site, ce qui effectivement aurait été plus simple (et je n'aurai alors probablement pas eu besoin de votre aide pour ces 2 problèmes à priori si simples).

Et dans la mesure où cet outil me sera utile à chaque session d'ajout de produits (donc pas tous les jours non plus...), il me suffira de copier-coller le code du menu (un moindre effort dans l'immédiat), le parser par une méthode restant à trouver (mais idéalement qui me soit accessible techniquement), pour avoir a dispo les tags possibles, et être certain que je peux affecter des tags liés à toutes les catégories du site au moment où je m'y colle. Le menu n'est pas différent en fonction des visiteurs, il évoluera au fur et à mesure que je déciderai de le faire évoluer, comme n'importe quel autre menu de site : j'ai juste intégré un développement (qui fonctionne à priori très bien) pour permettre à la volée d'afficher un filtrage complémentaire des produits de la boutique, et ce grâce à des tags sur les produits. Je conçois ici l'outil (indépendant) me permettant de générer ces tags semi-automatiquement lors de l'ajout d'un produit. Ces tags ont la forme que j'ai indiqué, rien d'autre.

Pour parser le HTML, je ne voyais d'accessible à mon niveau -et du haut de mes faibles compétences- que le JS et traitement de chaînes, et pour le remplissage de tableau honnêtement, je ne pensais même pas être bloqué à l'étape de déclaration!
Je suis dépité et désolé de ne pas réussir à comprendre ce que vous attendez de plus comme éléments sur ces deux problématiques

Dans tous les cas, demain matin je ne serai pas dispo, donc en cas de non-réponse à vos retours, ne déduisez pas que j'abandonne, c'est juste que je ne serai pas devant mon ordi, je serai de retour demain après-midi pour vous répondre, car je dois absolument avancer désormais!!

**psychadelic** · 06/11/2018, 01h43

Comment veux tu qu'on puisse y comprendre quoi que ce soit ?
dans ton post #15 on trouve un select avec

Code HTML :

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

1
2
3
4
5
6
<SELECT NAME="CaractéristiquesProduit" id="Attribut01" >
	<OPTION>Caractère</OPTION>
	<OPTION>Destinataire</OPTION>
	<OPTION>Couleur</OPTION>
	<OPTION>Matière</OPTION>
</SELECT>

alors que dans ton post #8 censé représenter "la source" on a :

Code HTML :

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

1
2
3
4
5
6
7
8
<li >
        <a href="/collections/collectZ">Sous-Catégorie 1.1</a>
        <ul class="site-nav--dropdown site-nav--submenu">
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.1</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.2</a></li>
          <li ><a href="/collections/collectionX">Sous-Sous-Catégorie 1.1.3</a></li>
        </ul>
      </li>

et les 2 choses n'ont absolument rien en commun.
ton truc est un jeu de devinettes ou tes réponses ne font que nous balader davantage, comprends que de notre coté c'est tout sauf amusant.

qu'elles sont les informations à prélever sur la source et dans quel logique de hiérarchie faut-il les classer ?

Parse et remplissage de tableaux dynamiques

JavaScript

Discussions similaires

Partager

Partager