Des esperluettes, des propriétés d'objet et des HTML internes des boutons

Question

J'écris un script JS qui a un objet avec des & dans certaines de ses propriétés, par exemple

var topicObj = {
  "Client & Peripherals": ["USB", "Printer", "Copy/Paste"],
  "Install & Upgrade": ["Tenant Upgrade", "Agent upgrade"],
  "DEM": ["Self Service", "Manager", "Smart policies", "GPO", "Configuration"]
}

Le problème est que, lorsque j'essaie d'itérer sur les valeurs d'une propriété, par exemple

selMTopic = "Client & Peripherals"
for (let t of topicObj[selMTopic])) {
  addTopic(topicsDD,topicObj[selMTopic][t]);
}

il échoue si la propriété a "&", il ne peut pas calculer t .

Voici les parties et fonctions associées:

Bouton qui, lorsqu'on clique dessus, affiche un menu déroulant avec les sujets principaux, qui seront remplis par le script avec les propriétés de topicObj.

<div class="dropdown">
  <button onclick="toggleDdown('MainDropdown')" class="dropbtn" id="MainTBtn">Choose Main Topic</button>
  <div id="MainDropdown" class="dropdown-content">

  </div>
</div>

Ajout d'un sujet "newTopic" au menu déroulant topicsDD; J'utilise charAt(0)topicsDD pour que la fonction setTopicidentifie s'il s'agit d'un sujet principal ou d'un sous-sujet

function addTopic(topicsDD,newTopic){
  let topics = document.getElementById(topicsDD);
  let topic = document.createElement('a');
  topic.addEventListener("click",function () {setTopic(topicsDD.charAt(0).concat(newTopic))});
  topic.innerHTML = newTopic;
  topics.appendChild(topic);
}

Remplacement des MainTBtn innerHTMLpar le sujet sélectionné dans DDown, l'une des propriétés de l'objet, et réinitialiser / remplir les sous-sujets DDown menu

function setTopic(newTopic) {
  var mTBtn = document.getElementById("MainTBtn");
  switch (newTopic.charAt(0)) {
    case "M":
      mTBtn.innerHTML = newTopic.substr(1);
      resetTopics("SubDropdown");
    break;
  ...

Effacez la liste déroulante et remplissez-la avec les éléments correspondants: les propriétés de topicObj s'il s'agit du menu "rubriques principales" DDown ou la valeur de la propriété correspondante si c'est le menu des sous-rubriques. C'est là que ça échoue, lorsque le sujet principal sélectionné a un "&". Après un autre fil de discussion , à des fins de test, il s'agit maintenant d'envoyer simplement "sujet principal -> Sous-sujet" pour tous les sous-sujets du principal sélectionné au journal de la console.

function resetTopics(topicsDD){
  var topicObj = {
    "Client & Peripherals": ["USB", "Printer", "Copy/Paste"],
    "Install & Upgrade": ["Tenant Upgrade", "Agent upgrade"],
    "DEM": ["Self Service", "Manager", "Smart policies", "GPO", "Configuration"]
  }
  let topics = document.getElementById(topicsDD);
  var selMTopic;
  topics.innerHTML = '';
  switch (topicsDD.charAt(0)) {
    case "M":
      for (let t in topicObj) {
        addTopic(topicsDD,t);
      }
      break;
    case "S":
      selMTopic = document.getElementById("MainTBtn").innerHTML;
      //selMTopic = "Client & Peripherals";
        for (let t of topicObj[selMTopic])
        {
          console.log( selMTopic,'->', t );
        }
      break;
  }
}

Lorsque je teste avec selMTopic = "Client & Peripherals", cela fonctionne bien, la console affiche tous ses sous-sujets. Lorsque j'utilise selMTopic = document.getElementById("MainTBtn").innerHTML, ce dont j'ai besoin, j'arrive dans Chrome:

"DropTest MultiDD.htm: 239 Uncaught TypeError: topicObj [selMTopic] ne peut pas être itéré à resetTopics (DropTest MultiDD.htm: 239)"

Firefox:

"Uncaught TypeError: topicObj [selMTopic] est un fichier resetTopics non défini: ///.../DropTest MultiDD.htm: 239"

Ligne 239 est for (let t of topicObj[selMTopic])enfunction resetTopics(topicsDD)

Une idée de pourquoi l'itération de propriété de l'objet n'accepte pas le bouton innerHTMLquand il a un "&"?

Answer 1

Vous utilisez la boucle for of.

selMTopic = "Client & Peripherals"
for (let t of topicObj[selMTopic])) {
   console.log(t);  // Check this value
   addTopic(topicsDD,t);  // Something like this
}