Discussion :

[cirdec49]

Bonsoir
Voici un bout de code que j'ai développé pour une appli web.
J'aurais aimé avoir qu'un seul tableau pour optimiser mon code.
Est ce que c'est possible ? Si oui, comment pourrais je faire ?
Merci d'avance pour votre aide.

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
// tableau liste zone
tabListZoneMap = new Array("zoneParis","zoneMarseille", "zoneLyon");
 
// tableau zone id
tabZoneMap = new Array();
tabZoneMap["zoneParis"] = new Array("3", "/paris");
tabZoneMap["zoneMarseille"] = new Array("0", "/marseille");
tabZoneMap["zoneLyon"] = new Array("1", "/lyon");
 
// boucle sur le tableau
tabListZoneMap.forEach(function(item, index, array) {
	var nbAnnonce= tabZoneMap[item][0];
	var href= tabZoneMap[item][1];
	console.log(item, index);
	console.log(nbAnnonce);
	console.log(href);
});

[Toufik83]

Bonjour,

Comme ça

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
// tableau zone id
let tabListZoneMap = [{
    zone: "Paris",
    href: "/paris",
    nbrAnnonce: 3
  },
  {
    zone: "Marseille",
    href: "/marseille",
    nbrAnnonce: 0
  },
  {
    zone: "Lyon",
    href: "/lyon",
    nbrAnnonce: 1
  }
];
 
// boucle sur le tableau
tabListZoneMap.forEach(function(item, index, array) {
  console.log("zone :", item.zone, ", nbrAnnonce :", item.nbrAnnonce, ", href :", item.href);
});

[cirdec49]

Merci mais comment faire ensuite pour récupérer le href ou le nombre d'annonce d'une ville précise ?
Avec mon code, je faisais comme ça :

Code :

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

1
2
var nbAnnonceParis= tabZoneMap["zoneParis"][0];
var hrefParis= tabZoneMap["zoneParis"][1];

mais là avec le nouveau tableau, je ne vois pas comment faire.

[javatwister]

Bonjour,

Toufik te l'a montré, non?

[cirdec49]

il faudrait boucler sur le tableau à chaque fois comme ceci ?

Code :

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

1
2
3
4
5
6
7
 
tabListZoneMap.forEach(function(item, index, array) {
  if(item.zone=="Paris"){
    nbAnnonceParis= item.nbrAnnonce;
    hrefParis= item.href;
  }
});

Il n'y aurait pas une façon plus directe ?

[javatwister]

Si tu veux une valeur au choix, fais comme ça:

Code :

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

1
2
let tabListZoneMap = {Paris:{href: "/paris",nbrAnnonce: 3},Marseille:{href: "/marseille",nbrAnnonce: 0},Lyon:{href: "/lyon",nbrAnnonce: 1}}
console.log(tabListZoneMap.Paris);

[javatwister]

Amuse-toi avec ces variantes, si tu veux:

Code :

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

1
2
3
4
console.log(tabListZoneMap.Paris);
console.log(Object.values(tabListZoneMap.Paris));
console.log(Object.values(tabListZoneMap.Paris).toString());
console.log(tabListZoneMap.Paris.nbrAnnonce);

[cirdec49]

Ok merci pour ton aide mais du coup, je pense que je vais quand même devoir passer par la solution de Toufik83 car le nom de la zone, je l'a récupère au format string via l'id d'une balise html.
Je n'avais pas mis tout le code sur mon premier message pour éviter de surcharger le sujet mais en gros voici ce que j'essaie de faire.
J'ai une carte SVG sur laquelle je dois afficher des infos bulles.

Voici du coup le code que je pense utiliser. Est ce que ça vous semble optimisé ?

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
// tableau zone id
//---------------------------
let tabListZoneMap4 = [{
    zone: "Paris",
    href: "/paris",
    nbrAnnonce: 3
  },
  {
    zone: "Marseille",
    href: "/marseille",
    nbrAnnonce: 0
  },
  {
    zone: "Lyon",
    href: "/lyon",
    nbrAnnonce: 1
  }
];
 
// hover sur la carte
//---------------------------
$( "#zoneCarte path" ).hover(function() {
 
	var idZone=$(this).attr('id');
 
	tabListZoneMap4.forEach(function(item, index, array) {
	  if(item.zone==idZone){
		var nbAnnonce= item.nbrAnnonce;
		// afficher l'info bulle
		if(nbAnnonce>0){
			$("#bulle-"+idZone).show();
		}
	  }
	});
 
	return false;
});

[javatwister]

Je comprends mais il est gênant d'être obligé de boucler pour un événement "Hover"

[cirdec49]

oui c'est vrai qu'une boucle sur le hover, ce n'est pas terrible ^^
Dans ce cas, il faut que j'utilise ma première solution avec deux tableaux.

[Toufik83]

Bonjour,

Vous pouvez utiliser l'événement "mouseenter" qui se déclenche 1 seule fois lorsque le dispositif de pointage est déplacé et que son curseur entre sur l'élément, puis je pense que filter() est beaucoup mieux que forEach pour ce cas :

Code :

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

1
2
3
4
5
6
7
$('#zoneCarte path').on('mouseenter',function(){
   let idZone=$(this).attr('id'),
      data=tabListZoneMap4
      .filter(element=>element.zone==idZone&&element.nbrAnnonce>0);
   if(data.length)
      $("#bulle-"+idZone).show();
})

Attention, vous utilisez nbAnnonce dans la boucle (sans "r") alors que le nom est différent dans les éléments du tableau nbrAnnonce

[cirdec49]

merci pour votre aide, ça va me permettre d'optimiser mon code.

[NoSmoking]

Bonjour,
pourquoi ne pas passer par un objet dont les clés sont les ID des éléments, le code s'en retrouve allégé.

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
const data = {
  "Paris": {
    "href": "/paris",
    "nbrAnnonce": 3
  },
  "Marseille": {
    "href": "/marseille",
    "nbrAnnonce": 0
  },
  "Lyon": {
    "href": "/lyon",
    "nbrAnnonce": 1
  }
}
 
// hover sur la carte
//---------------------------
$("#zoneCarte path").hover(function() {
  const idZone = $(this).attr('id');
  const item = data[idZone];
  if (item) {
    // afficher l'info bulle
    if (item.nbrAnnonce > 0) {
      $("#bulle-" + idZone).show();
    }
  }
  return false;
});

[cirdec49]

merci, je vais regarder ça