Pętla for..in przestała działać po próbie modularyzacji

Question

Witam. Otóż próbowałem dzisiaj podzielić swój kod na odrębne moduły (przy pomocy ES6 Modules) i natrafiłem na dość dziwny i nietypowy problem. Mianowicie chodzi o ten kawałem kodu:
 

Bot.prototype.createHelpList = async function(parentElement) {

  let helpContent = await fetch(`./assets/helpContent.json`);
      helpContent = await helpContent.json();
  const contentList = document.createElement(`dl`);
        contentList.setAttribute(`id`, `helpList`);
        contentList.setAttribute(`class`, `helpList`);
  console.log(helpContent);   // By sprawdzić w konsoli, czy treść z pliku JSON została załadowana  - jak widać, została
    for (term in helpContent) { ...

 

Standardowo kod ten działał bez zarzutu gdy zaciągałem kilka skryptów po kolei w [tt]index.html[/tt]
Jednak po modularyzacji, w konsoli pojawił się Reference Error z jakiegoś nieznanego mi powodu.

I tak zasadniczo nie wiem, o co chodzi. Struktura plików się nie zmieniła jak coś.

Jeżeli brakuje jakiś informacji które pomogą rozwiązać problem, lub podsunąć rozwiązanie to proszę pytać. Bo w sumie to sam nie wiem, co tu się zadziało - obiekt jest, lecz nie można po nim iterować. Jakieś pomysły, 

Answer 1

Moduły domyślnie działają w strict mode - co oznacza między innymi, że nie możesz używać niezadeklarowanych zmiennych.

Tak więc powinno być:

for (let a in b) {...}
for (let a of b) {...}
// ofc zamiast let może być const/var

A tak na boku:

contentList.setAttribute(`id`, `helpList`);
// powinno być po prostu
contentList.id = "helpList";

 

Comments

contentList.setAttribute(`id`, `helpList`);
// powinno być po prostu
contentList.id = "helpList";
 

 

Oczywiście rozważałem i to rozwiązanie i pewnie bym to zastosował, gdyby nie fakt, że zaraz za tym idę za ciosem i w taki sam sposób ustawiłem sobie nazwę klasy dla tegoż oto elementu. Dzięki temu też nieco dostosowałem wcięcia, przez co ten kawałek kodu wygląda nieco lepiej, niż to:

const contentList = document.createElement(`dl`);
      contentList.id = `helpList`;
      contentList.className = `helpList`;

lub to

const contentList = document.createElement(`dl`);
   contentList.id = `helpList`;

Także było to z mojej strony zamierzone działanie estetyczne ;p

Oczywiście doceniam Pana sugestię i dziękuje bardzo.
Życzę miłego wieczoru :)

---

że zaraz za tym idę za ciosem i w taki sam sposób ustawiłem sobie nazwę klasy dla tegoż oto elementu

Jak najbardziej, `el.className` zamiast setAttribute.

Natomiast

Także było to z mojej strony zamierzone działanie estetyczne ;p

Ehhh praktycznie każdy programista i każde narzędzie do formatowania kodu pod słońcem na to spojrzy i natychmiast powie "wyrzuć te wcięcia, pisz jak człowiek" :P

const contentList = document.createElement(`dl`);
contentList.id = "helpList";
contentList.className = "helpList";

 

Answer 2

Bo term nie jest deklarowane, a moduły są zawsze w trybie ścisłym (kod poza modułami domyślnie w nim nie jest). A w trybie ścisłym wszystkie zmienne muszą być zadeklarowane. Wystarczy dodać zatem słowo kluczowe przed term w pętli:

for ( const term in helpContent ) {

 

Answer 3

No tak.....  strict mode i brak deklaracji zmiennej tworzonej w pętli to te dwa brakujące puzle układanki. Wiedziałem, że coś przeoczyłem xD

Dziękuję Wam, panowie. Dostosowałem się do wskazówek i działa. Mogę wracać do pracy ;p