De e comercial, propriedades do objeto e HTMLs internos dos botões

Question

Estou escrevendo um script JS que tem um objeto com & em algumas de suas propriedades, por exemplo

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

O que acontece é que, quando tento iterar os valores de uma propriedade, por exemplo

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

falha se a propriedade tem "&", não pode computar t .

Estas são as partes e funções relacionadas:

Botão que, ao ser clicado, exibe um menu suspenso com os principais tópicos, que será preenchido pelo script com as propriedades 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>

Adicionando um tópico "newTopic" ao menu suspenso topicsDD; Eu uso o charAt(0)topicsDD para a função setTopicpara identificar se é um tópico principal ou um subtópico

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

Substituir o MainTBtn innerHTMLpelo tópico selecionado em DDown, uma das propriedades do objeto, e reconfigurar / preencher os subtópicos DDmenu

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

Limpe a lista suspensa e preencha-a com os itens correspondentes: as propriedades do topicObj se for o menu principal "tópicos principais" ou o valor da propriedade correspondente se for o menu de subtópicos. É aqui que falha, quando o tópico principal selecionado tem um "&". Seguindo outro tópico , para fins de teste, agora ele está apenas enviando "tópico principal -> Subtópico" para todos os subtópicos do principal selecionado para o log do 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;
  }
}

Quando eu testo com selMTopic = "Client & Peripherals", ele funciona bem, o console exibe todos os seus subtópicos. Quando eu uso selMTopic = document.getElementById("MainTBtn").innerHTML, que é o que preciso, entro no Chrome:

"DropTest MultiDD.htm: 239 Uncaught TypeError: topicObj [selMTopic] não é iterável em resetTopics (DropTest MultiDD.htm: 239)"

Raposa de fogo:

"TypeError não capturado: topicObj [selMTopic] is undefined resetTopics file: ///.../DropTest MultiDD.htm: 239"

A linha 239 está for (let t of topicObj[selMTopic])emfunction resetTopics(topicsDD)

Alguma ideia de por que a iteração da propriedade do objeto não está aceitando a do botão innerHTMLquando ele tem um "&"?

Answer 1

Você está usando o loop for.

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