11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai un tableau (1) qui contient une liste complète de labels : labelName=["Label1","Label2","Label3"];
Un autre (2) qui contient leurs nombres : labelCount=[10,27,6];

Label1 vaut 10, Label2 vaut 27, etc...

Et enfin un (3) ème tableau qui contient un ou plusieurs label(s) : postLabelName=["Label1","Label2","Label3"];

A partir de ça, j'aimerais écrire un script qui compare les valeurs du tableau (3) aux valeurs du tableau (1) afin de récupérer la valeur correspondante dans le tableau (2).

Quelle fonction dois-je utiliser en javascript ?
Merci Smiley smile
Modifié par misterclass (03 Jun 2016 - 18:52)
Bonjour,

Il y a peut-être une manière différente de faire ça, mais je n'ai pas trouvé de fonctions vraiment pratiques comme en PHP. Donc j'ai pondu un code qui te permet de récupérer les "labelCount" en comparaison le tableau "postLabelName" avec "labelName". Pour ce faire, j'ai fusionner "labelName" et "labelCount" en tableau associatif afin que ça soit plus facile de récupérer les valeurs, puis 2 boucles imbriquées avec un petit "if" pour identifier les même labels.

// Les tableaux
var labelName=["Label1","Label2","Label3"];
var labelCount=[10,27,6];
var postLabelName=["Label1","Label2","Label3"];

// Initiation des tableaux
var tableauAssociatif={}
var tableauRecuperer={}

// Boucle pour la fusion des labelName avec labelCount
// en tableau associatif
for(var key in labelName){
	
	// Fusion des données
	tableau_associa[labelName[key]] = labelCount[key];
	
}

// Boucle sur "postLabelName"
for(var key1 in postLabelName){

	// Boucle sur la liste complète des labels
	for(var key2 in tableauAssociatif){

		// Si le label de "postLabelName" existe dans
		// la liste complète des labels
		if(key2 == postLabelName[key1]){
		
			// On récupère le labelCount dans un autre tableau
			tableauRecuperer[key1] = tableauAssociatif[key2];
			
		}

	}

}

// Affichage du tableau contenant les labelCount correspondant
console.log(tableauRecuperer);

Bonne journée !
Bonjour et merci pour ton aide Smiley smile

Je n'ai pas réussi à mettre ton code en application. Rien n'apparait mais si j'ai bien compris, ton code affiche le tableau des valeurs des labels (20, 27, 6, etc). Cependant, ce que je souhaiterais est de récupérer la valeur unique du label, pas le tableau complet. Je me suis peut-être mal exprimé au départ ou je n'ai pas compris ton code...

Sinon, comment dois-je insérer ton code dans le html ? Y-a-t-il une manière particulière ?
Rien ne s'affiche en le mettant dans la balise
<script type="text/javascript"></script>

Modifié par misterclass (04 Jun 2016 - 23:11)
Bonsoir,

Rien ne s'affiche car c'est un "console.log()", il faut ouvrir la console de ton navigateur et le résultat s'affichera dedans. Cette fonction est plus pratique que "alert()" car elle permet de parcourir tableaux et objets, en dépit de cette dernière qui n'affichera que "[Array] ou [Object]". Par rapport au fonctionnement, je vais résumer pour être sûr qu'on se soit compris :

1. Un tableau avec des labels : ["Label1","Label2","Label3"]
2. Un tableau avec les nombres : [10,27,6]
3. Un tableau contenant un ou plusieurs labels : ["Label1","Label3"]
4. Comparer le tableau de l'étape 3 avec le tableau de l'étape 1, puis retourner les nombres correspondants, exemple : Si tableau 3 contient label 1 et label 3, cela va retourner 10 et 6

Ce script fait ça, il retourne les nombres des labels identifiés, sauf que je les enregistres juste dans un tableau nommé "tableauRecuperer"

En vérifiant j'ai remarqué que j'avais mal retranscrit, voici le code complet avec modification de l'erreur :

<script>

// Les tableaux
var labelName=["Label1","Label2","Label3"];
var labelCount=[10,27,6];
var postLabelName=["Label1","Label2","Label3"];

// Initiation des tableaux
var tableauAssociatif={}
var tableauRecuperer={}

// Boucle pour la fusion des labelName avec labelCount
// en tableau associatif
for(var key in labelName){
	
	// Fusion des données
	tableauAssociatif[labelName[key]] = labelCount[key];
	
}

// Boucle sur "postLabelName"
for(var key1 in postLabelName){

	// Boucle sur la liste complète des labels
	for(var key2 in tableauAssociatif){

		// Si le label de "postLabelName" existe dans
		// la liste complète des labels
		if(key2 == postLabelName[key1]){
		
			// On récupère le labelCount dans un autre tableau
			tableauRecuperer[key1] = tableauAssociatif[key2];
			
		}

	}

}

// Affichage du tableau contenant les labelCount correspondant
console.log(tableauRecuperer);

</script>
A copier/coller avec les balises "<script></script>", ça fonctionnera directement.
Nizalify a écrit :
Bonsoir,
Rien ne s'affiche car c'est un "console.log()", il faut ouvrir la console de ton navigateur et le résultat s'affichera dedans. Cette fonction est plus pratique que "alert()" car elle permet de parcourir tableaux et objets, en dépit de cette dernière qui n'affichera que "[Array] ou [Object]". Par rapport au fonctionnement, je vais résumer pour être sûr qu'on se soit compris :
1. Un tableau avec des labels : ["Label1","Label2","Label3"]
2. Un tableau avec les nombres : [10,27,6]
3. Un tableau contenant un ou plusieurs labels : ["Label1","Label3"]
4. Comparer le tableau de l'étape 3 avec le tableau de l'étape 1, puis retourner les nombres correspondants, exemple : Si tableau 3 contient label 1 et label 3, cela va retourner 10 et 6
Ce script fait ça, il retourne les nombres des labels identifiés, sauf que je les enregistres juste dans un tableau nommé "tableauRecuperer"
En vérifiant j'ai remarqué que j'avais mal retranscrit, voici le code complet avec modification de l'erreur :
&lt;script&gt;

// Les tableaux
var labelName=["Label1","Label2","Label3"];
var labelCount=[10,27,6];
var postLabelName=["Label1","Label2","Label3"];

// Initiation des tableaux
var tableauAssociatif={}
var tableauRecuperer={}

// Boucle pour la fusion des labelName avec labelCount
// en tableau associatif
for(var key in labelName){
	
	// Fusion des données
	tableauAssociatif[labelName[key]] = labelCount[key];
	
}

// Boucle sur "postLabelName"
for(var key1 in postLabelName){

	// Boucle sur la liste complète des labels
	for(var key2 in tableauAssociatif){

		// Si le label de "postLabelName" existe dans
		// la liste complète des labels
		if(key2 == postLabelName[key1]){
		
			// On récupère le labelCount dans un autre tableau
			tableauRecuperer[key1] = tableauAssociatif[key2];
			
		}

	}

}

// Affichage du tableau contenant les labelCount correspondant
console.log(tableauRecuperer);

&lt;/script&gt;
A copier/coller avec les balises "&lt;script&gt;&lt;/script&gt;", ça fonctionnera directement.

Un peu plus concis :
var labelName=["Label1","Label2","Label3"];
var labelCount=[10,27,6];
var postLabelName=["Label1","Label2","Label3"];

function search()
{

var result={}

for(var index = 0 ; index < postLabelName.length ; index++)
{

	var key = postLabelName[index];
	var index2 = labelName.indexOf(key);
	
	if (index2 < 0) continue;
	
	result[key] = labelCount[index2];
	
}

return result;

}

function test()
{
console.log(search());
}

Retourne un tableau clé / valeur avec chaque association trouvée.
Postulat de base : tableaux labelName et labelCount de mêmes dimensions.
Test OK sous Firefox.
Modifié par sepecat (05 Jun 2016 - 10:22)
Je n'arrive toujours pas à faire fonctionner correctement la console de Firefox. Je l'ai ouvert par le biais du menu "outils->développement web->console web" mais je ne vois pas les résultats de la fonction javascript s'afficher. C'est la première fois que j'utilise la console Firefox, comment dois-je procéder ? Est-on obligé de passer par la console pour l'affichage ? N'est-il pas possible d'afficher le résultat pour un label donné ? (en passant par une condition peut-être).

Merci pour votre aide en tout cas Smiley smile
misterclass a écrit :
Je n'arrive toujours pas à faire fonctionner correctement la console de Firefox. Je l'ai ouvert par le biais du menu "outils-&gt;développement web-&gt;console web" mais je ne vois pas les résultats de la fonction javascript s'afficher. C'est la première fois que j'utilise la console Firefox, comment dois-je procéder ? Est-on obligé de passer par la console pour l'affichage ? N'est-il pas possible d'afficher le résultat pour un label donné ? (en passant par une condition peut-être).


Bonjour !

Non, on n'est pas obligé de passer par la console pour se rendre compte de la valeur d'une variable mais c'est quand même ce qu'il y a de plus simple.

La seule fois où j'ai eu des problèmes avec la console de Firefox, c'est lorsque j'avais installé Firebug : les messages semblaient être interceptés par Firebug même lorsque celui-ci n'était pas ouvert...

Faites console.log('a') pour voir...

Smiley smile
J'ai entré dans le champ approprié la commande suivante :
console.log('a')
La console m'indique :
console.log('a')
undefined

C'est normal ?
Modifié par misterclass (14 Jun 2016 - 01:54)
Bonjour !

misterclass a écrit :
J'ai entré dans le champ approprié la commande suivante :
console.log('a')
La console m'indique :
console.log('a')
a
undefined

C'est normal ?


Oui, normal (Edit : il faut aussi qu'il y ait ce petit 'a' que j'ai mis en rouge). Votre console fonctionne.

Smiley smile
Modifié par Zelena (14 Jun 2016 - 11:14)
Bonjour Smiley smile
Je n'ai pas de petit a au-dessus du undefined.
Quelque chose doit m'échapper car même si la console fonctionne, rien ne s'affiche quand je lance le script Smiley decu
Modifié par misterclass (15 Jun 2016 - 16:53)
Bonsoir !

Vous avez essayé avec alert('a') ? En remplaçant le 'a' par ce que vous voulez... Ça devrait arrêter le script mais... aujourd'hui j'ai galéré car mon script ne passait pas par là il aurait dû... le problème peut provenir de bien en amont...

Smiley smile
J'ai fait un alert('toto') dans le champ de la console du navigateur. J'ai un message "pop-up" de ce message et c'est toujours pareil ça ne fonctionne pas.

Ça vient peut-être de mon html :

<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>test</title>
<script type="text/javascript">
var labelName=["Label1","Label2","Label3"];
var labelCount=[10,27,6];
var postLabelName=["Label1","Label2","Label3"];

function search()
{

var result={}

for(var index = 0 ; index < postLabelName.length ; index++)
{

	var key = postLabelName[index];
	var index2 = labelName.indexOf(key);
	
	if (index2 < 0) continue;
	
	result[key] = labelCount[index2];
	
}

return result;

}
</script>
</head>
<body>
test de la fonction de recherche
<script type="text/javascript">
function test()
{
console.log(search());
}
</script>
</body>
</html>


Merci aux personnes qui m'aident en tout cas.
misterclass a écrit :
J'ai fait un alert('toto') dans le champ de la console du navigateur. J'ai un message "pop-up" de ce message et c'est toujours pareil ça ne fonctionne pas.

Ça vient peut-être de mon html :

&lt;!DOCTYPE html&gt;

&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
var labelName=["Label1","Label2","Label3"];
var labelCount=[10,27,6];
var postLabelName=["Label1","Label2","Label3"];

function search()
{

var result={}

for(var index = 0 ; index &lt; postLabelName.length ; index++)
{

	var key = postLabelName[index];
	var index2 = labelName.indexOf(key);
	
	if (index2 &lt; 0) continue;
	
	result[key] = labelCount[index2];
	
}

return result;

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
test de la fonction de recherche
&lt;script type="text/javascript"&gt;
function test()
{
console.log(search());
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


Merci aux personnes qui m'aident en tout cas.

Tout ceci fonctionne très bien et la sortie sur la console est correcte (vérifié sur Firefox)...
Pour afficher le résultat dans une zone écran, cf. code ci-dessous :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>test</title>
<script type="text/javascript">
var labelName=["Label1","Label2","Label3"];
var labelCount=[10,27,6];
var postLabelName=["Label1","Label2","Label3"];

function search()
{

var result={};

for(var index = 0 ; index < postLabelName.length ; index++)
{

	var key = postLabelName[index];
	var index2 = labelName.indexOf(key);
	
	if (index2 < 0) continue;
	
	result[key] = labelCount[index2];
	
}

return result;

}

function test()
{
var element = document.getElementById("output");
var result = search();
console.log(result);
element.innerHTML = result === 'undefined' | result === null ? "Non trouvé" : JSON.stringify(result);
}
</script>
</head>
<body>
<p>test de la fonction de recherche</p>
<pre id="output" style="border:2px solid black;padding:0.5rem;">
 
</pre>
<button type="submit" onclick="test()">Tester</button>
</body>
</html>

Testé lui aussi OK sur Firefox...
Super, je peux voir que le "trie" des tableaux est parfait.
Je me suis permis de supprimer la ligne contenant : console.log(result); (qui ne sert plus à rien je crois)

Par contre, je vais encore solliciter votre aide.

Là, tout est dans un tableau mais j'aimerais récupérer la valeur d'un label particulier (le nombre si vous préférez) par rapport à son nom. En fait, je compte moi-même (donc en dur dans le code) mettre les noms des labels dans un menu déroulant et je souhaiterais qu'à côté figure leur nombre respectifs.

Par exemple :

Home | Intitulé1 | Intitulé2 ...

Quand je passe la souris sur "Intitulé1", s'affiche dans un menu déroulant les labels suivants avec leur nombre :
Label1 (10)
Label2 (27)


Quand je passe la souris sur "Intitulé2", s'affiche dans un menu déroulant le label suivant avec son nombre :
Label3 (6)

etc...

Il faudrait donc une fonction recup() qui récupère le nombre du label en fonction de son nom. Comment puis-je faire ceci ?
Merci encore une fois à tous.
Modifié par misterclass (21 Jun 2016 - 16:36)