（JavaScript）Arrayがundefinedとなるのを解消したい

Question

###実現したいこと
下記URLを参考に、1つ目のプルダウンの選択肢に合わせ、2つ目のプルダウンの選択肢をフィルタリングしようと考えております。
https://blog.narito.ninja/detail/50

エリアで"選択肢A"を選んだらアトラクションで"選択肢a〜c"が表示され、
エリアで"選択肢B"を選んだらアトラクションで"選択肢d〜h"が表示されるというイメージです。

しかしながら、現状エリアを選択してもアトラクションの選択肢が何も表示されません。
なお、post_form.htmlに記載しているの下記JavaScriptコードを削除すると、アトラクションの選択肢が全て表示されるようになることから、アトラクションのプルダウンにデータは渡されている状態ではあります。

attractionElement.children().remove();

###発生中のエラー
エリアとアトラクションの情報が入っているArray（変数名：categoryList）からfor文でkeyと値をループして抽出するコードにて、「Uncaught TypeError: Object.key is not a function or its return value is not iterable」が発生しています。

検証画面で確認したところ、エラーの直前にてcategoryList配列がundefinedとなっていることが原因かと考えております。

ただし、なぜこの様になってしまうのかがわからないため、お気づきの点についてご教示いただけますと幸いです。

※console.logでの変数確認結果と表示されているエラー画面を添付します

###関連コード
必要と思われる箇所のみ記載いたします。不足等ありましたらご指摘願います。
post_form.html（JavaScript併記）

<form method="post" enctype="multipart/form-data">
    <div class="formpost">
        <div>エリア<span>※必須</span></div>
            <select name="area" placeholder="選択してください" class="form-control" id="id_area">
                <option value="1">----選択してください</option>
                <option value="2">ワールドバザール</option>
                <option value="3">アドベンチャーランド</option>
                <option value="4">ウエスタンランド</option>
                <option value="5">クリッターカントリー</option>
                <option value="6">ファンタジーランド</option>
                <option value="7">トゥーンタウン</option>
                <option value="8">トゥモローランド</option>
           </select>
    </div>
    <div class="formpost">
        <div>アトラクション<span>※必須</span></div>
            <select name="attraction" placeholder="選択してください" class="form-control" id="id_attraction">
                <!-- JavaScriptのattractionElement.children().remove();を消すと下記optionが現れますが、左記を記述するとoptionが全て非表示となります -->
                <option value="1">----エリアを選択してください</option>
                <option value="2">オムニバス</option>
                <!-- 中略 -->
                <option value="48">モンスターズ・インク“ライド&amp;ゴーシーク！”</option>
                <option value="49">トゥモローランド（その他）</option>
            </select>
    </div>
</form>

    <script>
        const areaElement = $('#id_area');
        const attractionElement = $('#id_attraction');
        const area_attraction = {
　　　　　　　//一部のみ記載
            '----選択してください': [
                {
                    'value': '----エリアを選択してください',
                    'name': '----エリアを選択してください'
                },
            ],
            'ワールドバザール': [
                {
                    'value': 'オムニバス',
                    'name': 'オムニバス'
                },
                {
                    'value': 'ペニーアーケード',
                    'name': 'ペニーアーケード'
                },
                {
                    'value': 'ワールドバザール（その他）',
                    'name': 'ワールドバザール（その他）'
                },
            ],
        };
        console.log("area_attraction", area_attraction)

    const changeArea = (select) => {
        attractionElement.children().remove();
        const parentId = areaElement.val();
        　console.log("parentId", parentId)
        const categoryList = area_attraction[parentId];
        　console.log("categoryList", categoryList)
        for (const category of Object.key(categoryList)) {
            　console.log("category", category)
            const option = $('<option>');
                option.val(category['value']);
                option.text(category['name']);
                attractionElement.append(option);
            }
            if (select !== undefined) {
                attractionElement.val(select);
            }
        };
        
        $('#id_area').on('change', () => {
            changeArea();
        });

        if (areaElement.val()) {
            const selectedCategory = attractionElement.val();
            changeArea(selectedCategory);
        }
    </script>

forms.py

from .models import Area, Attraction, Category

class PostForm(forms.Form):

    title = forms.CharField(max_length=50, label='タイトル')
    area = forms.ModelChoiceField(queryset=Area.objects.all(), label='エリア', widget=forms.Select, initial="----選択してください")
    attraction = forms.ModelChoiceField(queryset=Attraction.objects.all(), label='アトラクション', widget=forms.Select, initial="----エリアを選択してください")
    category = forms.ModelChoiceField(queryset=Category.objects.all(), label='カテゴリ', widget=forms.Select, initial="----選択してください")
    content = forms.CharField(label='内容', widget=forms.Textarea())
    image = forms.ImageField(label='イメージ画像', required=False)

models.py

class Area(models.Model):
    name = models.CharField("エリア", max_length=100)
    slug = models.SlugField("スラッグ")

    def __str__(self):
        return str(self.name)

class Attraction(models.Model):
    name = models.CharField("アトラクション", max_length=100)
    slug = models.SlugField("スラッグ")

    def __str__(self):
        return str(self.name)

class Category(models.Model):
    name = models.CharField("カテゴリ", max_length=100)
    slug = models.SlugField("スラッグ")

    def __str__(self):
        return str(self.name)

class Post(models.Model):
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    area = models.ForeignKey(Area, verbose_name='エリア', on_delete=models.CASCADE)
    attraction = models.ForeignKey(Attraction, verbose_name='アトラクション', on_delete=models.CASCADE)
    category = models.ForeignKey(Category, verbose_name='カテゴリ', on_delete=models.CASCADE)
    title = models.CharField("タイトル", max_length=200)
    image = models.ImageField(upload_to='images', verbose_name='Image画像', null=True, blank=True)
    content = models.TextField("本文")
    created = models.DateTimeField("作成日", default=timezone.now)
    public = models.BooleanField("公開フラグ", default=False)

###開発環境
・Visual Studio Code 1.59
・mac OS Catalina 10.15.7
・Github
・Python 3.8.3
・Django 2.2.10
・PostgreSQL

Comments

[k_a]

1. `area_attraction`のオブジェクト構造が破綻しています。一部のみ記載とのことですが、省略する場合でも正しい形式で記載して下さい。

2. javascriptの問題であればPythonではなく素のHTMLにレンダリングされたコードを記載したほうが回答が集まりやすいかと思います。

[minari766]

ご助言有難うございます！
1. 余分な"],"を削除いたしました。

2. おっしゃる通りです！HTML上のレンダリングフィールドをHTMLに変換し、JSと分割いたしました。

また何かわかりづらい所や不備等ありましたらご指摘いただけますと幸いです。

Answer 1

   const area_attraction = {
     //一部のみ記載
     '----選択してください': [{
       'value': '----エリアを選択してください',
       'name': '----エリアを選択してください'
     }, ],
     'ワールドバザール': [{
         'value': 'オムニバス',
         'name': 'オムニバス'
       },
       {
         'value': 'ペニーアーケード',
         'name': 'ペニーアーケード'
       },
       {
         'value': 'ワールドバザール（その他）',
         'name': 'ワールドバザール（その他）'
       },
     ],
   };

area_attractionは連想配列です。配列（リスト風オブジェクト）ではありません。
オブジェクトへのアクセスはobject[key]です。object[index]ではありません。

<option value="1">のようにインデックス風のvalueを設定して、以下のようにオブジェクトへアクセスをするのは間違いです。

const parentId = areaElement.val();
const categoryList = area_attraction[parentId];

インデックスでのアクセスをするならObject.entries(object)[index]のようになりますが、今回の場合は(本投稿でobjectが省略されているのもあり)不適合です。

optionのvalueにワールドバザール等の文字列を設定するか、以下のようにワールドバザール等のテキストをparentIdにする必要があります

const parentId = $('#id_area option:selected').text();
const categoryList = area_attraction[parentId];

---

上の処置で取得できるcategoryListは以下の構造を持ちます。

      [
       {
         'value': 'オムニバス',
         'name': 'オムニバス'
       },
       {
         'value': 'ペニーアーケード',
         'name': 'ペニーアーケード'
       },
       {
         'value': 'ワールドバザール（その他）',
         'name': 'ワールドバザール（その他）'
       },
     ],

これは配列です。したがってfor-ofでのObject.key(categoryList)は間違いです。
配列であるcategoryListに対して直接for-ofを回すことができます。

-     for (const category of Object.key(categoryList)) {
+     for (const category of categoryList) {

---

どのようなデータ構造か、何をどう処理するのかを考えれば分かる問題ですので、丁寧に構造を把握することをおすすめします。

Comments

[minari766]

ご教示いただいた方法でエラー解決できました！
各種データ構造について理解が全く足りていないので、改めて確認してみたいと思います。
有難うございました！