非同期で読み込む外部JSONファイルの読込出力完了後に関数を実行したい

Question

前提・実現したいこと

fetch apiでJSONファイルを読込み出力し、さらに出力データをアコーディオンメニューにしようとしています。
JSONファイルの出力はできたのですがアコーディオンメニューの実装中にundefinedになっていまします。

fetch apiでJSONファイルを読込み出力

let resortListUrl = "https://script.googleusercontent.com/macros/echo?user_content_key=UoVvVXWpytG2ol8Tsn8cuej65rsqHMqxtw5xG-HYXarMzbMMgWIUurmoy2I7CHC3ZxeFk3D9SZxSnnlWUx67KmryZ18v1yhJm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJ-UaAwDg0uRrxX2mlPzzQZYW-kH8X3RdXPvSR0p8JW5c0RmzB0v9RHe0Y0CjQWvjWSZiEOHtfR-16-v9YLNsT0kkYbkGyEe8Q&lib=Mra_Vp85i2zO-JFqqYajL2ey7DX5kpduB";

fetch(resortListUrl, {
    method: "GET",
})
    .then(response => response.json())
    .then(json => {
        let listHtml = "<h2 class='sub-title'>都道府県 </h2><form name='form1'>";
        for (j = 0; j < (json.length) - 1; j++) {
            listHtml += "<h3 class='region'>" + json[j]["area"] + "</h3><ul class='acc-contents'>";
            for (i = 0; i < (json[j]["detail"].length); i++) {
                listHtml += "<li><input type='checkbox' value='" + json[j]["detail"][i]["place_detail"]["number"] + json[j]["detail"][i]["place_detail"]["name"] + "' name='checkBox'> " + json[j]["detail"][i]["place_detail"]["name"] + "</input></li>"
            };
            listHtml += "</ul>";
        };
        listHtml += "</form>";
        let asideWrapper = document.getElementById("aside-wrapper");
        asideWrapper.innerHTML = listHtml;
    })

    <div class="main-content wrapper">    
        <aside>
            <div id="aside-wrapper"></div>
        </aside>
    </div>

試したこと

上記のJSONデータの読込と出力はうまくいきますが、下記のtoggleメソッドを追加してアコーディオンメニューを実装しようとするとundefinedeエラーが出てしまいます

上記にthenで繋いでアコーディオンメニュー追加したい

    .then(listHtml => {
        let asideWrapper = document.getElementById("aside-wrapper");
        asideWrapper.innerHTML = listHtml;
        document.addEventListener("load", () => {
            const region = document.getElementsByClassName('.region');
            for (let i = 0; i < region.length; i++) {
                let regionEach = region[i];
                let content = regionEach.nextElementSibling;
                regionEach.addEventListener('click', () => {
                    regionEach.classList.toggle('is-active');
                    content.classList.toggle('is-open');
                });
            }
        })
    });

.region::after {
    transform: rotate(90deg);
    transition-duration: .3s;
}

.region.is-active::before {
    opacity: 0;
}

.region.is-active::after {
    transform: rotate(0);
}

.acc-contents {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition-duration: .3s;
}

.acc-contents.is-open {
    line-height: normal;
}

補足情報

実装方法お分かりになる方、ご教授ください。

Answer 1

.then(json => {・・・}) でthenに設定している関数 json => {・・・}　の本体の最後で、listHtml をreturnしないといかんやろと思いますわ。なので、以下の一行をとりあえず追加してみたらええかなと思いますわ。

.then(json => {
        let listHtml = "<h2 class='sub-title'>都道府県 </h2><form name='form1'>";
        for (j = 0; j < (json.length) - 1; j++) {

・・・略・・・

        listHtml += "</form>";
        let asideWrapper = document.getElementById("aside-wrapper");
        asideWrapper.innerHTML = listHtml;
+       return listHtml;
    })

そんで、この後に

.then(listHtml => { ・・・

をつなげてやれば、後の then に設定している関数の引数 listHtml にHTMLの文字列が入ってくる想定や。この

+       return listHtml;

がない現状だと、次のthenのlistHtml => { の listHtml に何も渡されてこない、つまり undefined になるやろな思いますわ。

うまくいくことを祈ってるで〜

続き：

よく見たら、ここがかなり怪しげなコードになってるゆうところがありましたわ。それは以下の部分

.then(listHtml => {
        let asideWrapper = document.getElementById("aside-wrapper");
        asideWrapper.innerHTML = listHtml;
        document.addEventListener("load", () => {
            const region = document.getElementsByClassName('.region');
            for (let i = 0; i < region.length; i++) {
                let regionEach = region[i];
                let content = regionEach.nextElementSibling;
                regionEach.addEventListener('click', () => {
                    regionEach.classList.toggle('is-active');
                    content.classList.toggle('is-open');
                });
            }
        })
    });

の中の

document.addEventListener("load", () => {
・・・
});

の部分。これ、なんでloadハンドラをここでaddEventListenerしてるんや？　っていう。これだと、 loadのリスナーとして設定している関数() => {　・・・ } 　は、一度も呼ばれないと思います。なので、試しに以下の２行を削除してみるとどないになりますやろ？

.then(listHtml => {
  let asideWrapper = document.getElementById("aside-wrapper");
  asideWrapper.innerHTML = listHtml;
- document.addEventListener("load", () => {
    const region = document.getElementsByClassName('.region');
    for (let i = 0; i < region.length; i++) {
      let regionEach = region[i];
      let content = regionEach.nextElementSibling;
      regionEach.addEventListener('click', () => {
        regionEach.classList.toggle('is-active');
        content.classList.toggle('is-open');
      });
    }
- })
});

上の２行を削除すると、間に入っていた関数本体部分をインデント１個分左に寄せることになります。この修正で、すべてうまくいくかは分かりませんが、少なくとも、Promise の then に設定するコールバックの中に、documentのload リスナー関数を設定しても、設定した関数が呼ばれることは無いと思われるので、上記２行の削除は試してみる価値はあると思うてます。

Comments

[usk_155]

ありがとうございます。
return listHtml; を追記してみましたが、うまくいかないようです...
見出しのみ表示されますが、アコーディオン機能が実装されないようです。
エラーコードも表示されません。

[退会済みユーザー]

コメントおおきにです。よく見たら、他にも「明らかにここは変やろ？」と思うたところがありましたので、回答に続きを書きました。ちょっと試しにやってみたって。

[usk_155]

再度ご確認いただき誠にありがとうございます。
ご指摘の箇所を直したところ実装できました(涙
初めてteratailを利用したのですが、suwmn50799さんのおかげで解決できました。ありがとうございました。
ベストアンサーにさせていただきます。
また機会がございましたら、よろしくお願いいたします。

Answer 2

jsの部分は、（１）読み込み時にJSONデータをfetchしてHTMLを構築した後、（２）続けて、その構築済みのHTMLに対して加工していくわけですから、
あえてloadイベントのタイミングで（２）を行う必要はないと考えられます。
したがって

.then(listHtml => {
        let asideWrapper = document.getElementById("aside-wrapper");
        asideWrapper.innerHTML = listHtml;
-       document.addEventListener("load", () => {
-           const region = document.getElementsByClassName('.region');
+       const region = document.getElementsByClassName('region');
        for (let i = 0; i < region.length; i++) {
            let regionEach = region[i];
            let content = regionEach.nextElementSibling;
            regionEach.addEventListener('click', () => {
                regionEach.classList.toggle('is-active');
                content.classList.toggle('is-open');
            });
        }
-     })
    });

のようにしたらいかがでしょうか。

またCSSの部分は

.region::after {
    transform: rotate(90deg);
    transition-duration: .3s;
}

.region.is-active::before {
    opacity: 0;
}

.region.is-active::after {
    transform: rotate(0);
}

.acc-contents {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition-duration: .3s;
}

.acc-contents.is-open {
-   line-height: normal;
+   height: auto
+   opacity: 1;
}

に直した場合いかがでしょうか。
（is-openのときに不透明度を戻す）

参考：
https://developer.mozilla.org/ja/docs/Web/CSS/opacity
https://developer.mozilla.org/ja/docs/Web/CSS/height

参照 codePen

Comments

[usk_155]

コメントありがとうございます。
わかりやすい解説と参考ページもありがとうございます。
高評価させていただきます。