Optimiser un tableau javascript

Version imprimable

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:

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);
});

Bonjour,

Comme ça

Code:

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);
});

28/01/2023, 09h26
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:

1 2 var nbAnnonceParis= tabZoneMap["zoneParis"][0]; var hrefParis= tabZoneMap["zoneParis"][1];
mais là avec le nouveau tableau, je ne vois pas comment faire.
28/01/2023, 10h04
javatwister

Bonjour,

Toufik te l'a montré, non?

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

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 ?

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

Code:

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

Amuse-toi avec ces variantes, si tu veux:

Code:

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);

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:

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; });

28/01/2023, 13h16
javatwister

Je comprends mais il est gênant d'être obligé de boucler pour un événement "Hover"
28/01/2023, 13h39
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.

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:

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

29/01/2023, 17h58
cirdec49

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

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:

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;
});

01/02/2023, 12h00
cirdec49

merci, je vais regarder ça