[jQuery]親・子・孫でソートできるプルダウンリストの作成

前提・実現したいこと

JS１年生です。
これまで、プラグインぐらいしか使ってこなかったので、困っています。

やりたいことは、JSONデータを使って、3段階位のソートのプルダウンリストを作成しようとおもっています。
下記のページを参考に作っているのですが、3段階目が作れずに困っています。
https://lancers.work/pref-city-form-jquery-json/

発生している問題・エラーメッセージ

3つめを見様見真似で作ったところ下記のエラーが出ています。
Uncaught TypeError: Cannot read property '101' of undefined

JSのjQuery基礎的なところがないので、無理やりくっつけてるだけとういのは重々承知なのですが・・・
cat3の中身を見に行けてないのが原因だろうとおもっているのですが、
どう解決したらよいかがわかりません。

JSONデータの構造は、こちらが指定しいて良いという条件なので、idなどは仮当てになっています。
どなたか、3つめの選択ができるようにどうしたらよいか教えてください。

よろしくお願いします。

該当のソースコード

html側

<select id="select-pref"><option value="">１つめの選択</option></select><br>
<select id="select-city"><option value="">2つ目の選択</option></select><br>
<select id="select-city2"><option value="">3つ目の選択</option></select>

JS側

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//1つめ
$(function () {
  $.getJSON('/json/lesson.json', function (data) {
    for (var i = 0; i < 2; i++) {
      var code = i + 1;
      code = ('00' + code).slice(-2);
      $('#select-pref').append('<option value="'+code+'">'+data[i][code].pref+'</option>');
    }
  });
});

// 2つめ
$('#select-pref').on('change', function () {
  //1つ目が選ばれたら〜
  $('#select-city option:nth-child(n+2)').remove(); // 2つ目のフォームをクリア
  
  var select_city = ('00' + $('#select-pref option:selected').val()).slice(-2);
  var key = Number(select_city) - 1;
  
  $.getJSON('/json/lesson.json', function (data) {
    for (var i = 0; i < data[key][select_city].city.length; i++) {
      $('#select-city').append('<option value="' + data[key][select_city].city[i].id + '">' + data[key][select_city].city[i].name + '</option>');
    }
  });
});

// 3つめ
$('#select-city').on('change', function () {
  $('#select-city2 option:nth-child(n+2)').remove(); // 3つ目のフォームをクリア
  var select_cat3 = ('00' + $('#select-city option:selected').val()).slice(-3);
  var key2 = Number(select_cat3) - 0;

  $.getJSON('/json/lesson.json', function (data) {
    for (var i = 0; i < data[key2][select_cat3].city.cat3.length; i++) {
      console.log("var i=" + i);
      $('#select-city2').append('<option value="' + data[key2][select_cat3].cat3[i].id + '">' + data[key2][select_cat3].cat3[i].name2 + '</option>');
    }
  });
});

</script>

JSONファイル

[{
  "01": {
    "id": "01",
    "pref": "千葉県",
    "city": [{
      "id": "101",
      "name": "千葉県-千葉市",
      "cat3": [{
        "id": "010101",
        "name2": "千葉県-千葉市-1区"
        }, {
        "id": "010102",
        "name2": "千葉県-千葉市-2区"
        }]
    }, {
      "id": "0102",
      "name": "千葉県-松戸市",
      "cat3": [{
        "id": "010101",
        "name2": "千葉県-松戸市-1区"
        }, {
        "id": "010102",
        "name2": "千葉県-松戸市-2区"
        }]
    }]
  }
}, {
  "02": {
    "id": "02",
    "pref": "東京都",
    "city": [{
      "id": "02201",
      "name": "東京都-新宿区",
      "cat3": [{
        "id": "010101",
        "name2": "東京都-新宿区-1丁目"
        }, {
        "id": "010102",
        "name2": "東京都-新宿区-2丁目"
        }]
    }, {
      "id": "02202",
      "name": "東京都-中央区",
      "cat3": [{
        "id": "010101",
        "name2": "東京都-中央区-1丁目"
        }, {
        "id": "010102",
        "name2": "東京都-中央区-2丁目"
        }]
    }]
  }
}]

68user

2021/01/24 05:02

コードの挿入を使ってインデントがついている状態にしてもらえると、大変読みやすくてうれしいです。

niko_hiyoko

2021/01/24 05:22

ご指摘ありがとうございます！コード扱いに変更しました！もし、よかったら、3つめのコードと、もし、必要でしたらJSONファルの方も、こうなった方がいいよ。というのがあれば教えていただけると助かります。 2つめまでは、参考にしたページそのままなので、3つめを作りたくて悩んでおりいます。 data[key2][select_cat3].cat3[i].idと書いているところが、どのように処理されているのかが理解ができず、作れないでいます。もしよろしければご教授いただけると助かります！（涙

行動規範の内容に同意します

回答2件

ベストアンサー

余計なお世話ではありますが、元ページがわたしには大変わかりづらかったので修正しました (特に json データ構造)。SoshiAdachi さんの回答で理解できたなら、わたしのものはスルーいただいて結構です。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
  <select id="select-pref"><option value="">1つめの選択</option></select><br>
  <select id="select-city"><option value="">2つ目の選択</option></select><br>
  <select id="select-town"><option value="">3つ目の選択</option></select>
</body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//1つめ
  $(function () {
      $.getJSON('/data.json', function (data) {
          for ( let pref of data ){
              let buf = '<option value="'+pref.prefid+'">'+pref.prefname+'</option>';
              $('#select-pref').append(buf);
              console.log(buf);
          }
      });
  });

  // 2つめ
  $('#select-pref').on('change', function () {
      //1つ目が選ばれたら〜
      $('#select-city option:nth-child(n+2)').remove(); // 2つ目のフォームをクリア
      let select_prefid = $('#select-pref option:selected').val();

      $.getJSON('/data.json', function (data) {
          let pref = data.find((p) => p.prefid === select_prefid);
          for ( let city of pref.city ){
              let buf = '<option value="' + city.cityid + '">' + city.cityname + '</option>';
              $('#select-city').append(buf);
              console.log(buf);
          }
      });
  });

  // 3つめ
  $('#select-city').on('change', function () {
      $('#select-town option:nth-child(n+2)').remove(); // 3つ目のフォームをクリア
      var select_prefid = $('#select-pref option:selected').val();
      var select_cityid = $('#select-city option:selected').val();
      $.getJSON('/data.json', function (data) {
          let pref = data.find((p) => p.prefid === select_prefid);
          let city = pref.city.find((c) => c.cityid === select_cityid);
          for ( let town of city.town ){
              let buf = '<option value="' + town.townid + '">' + town.townname + '</option>';
              $('#select-town').append(buf);
              console.log(buf);
          }
      });
  });
</script>
</html>

data.json

[
    {
        "prefid": "01",
        "prefname": "千葉県",
        "city": [
            {
                "cityid": "01101",
                "cityname": "千葉県-千葉市",
                "town": [{"townid": "0110101", "townname": "千葉県-千葉市-1区"},
                         {"townid": "0110102", "townname": "千葉県-千葉市-2区"}
                        ]
            },
            {
                "cityid": "01102",
                "cityname": "千葉県-松戸市",
                "town": [{"townid": "0110201", "townname": "千葉県-松戸市-1区"},
                         {"townid": "0110202", "townname": "千葉県-松戸市-2区"}
                        ]
            }
        ]
    },

    {
        "prefid": "02",
        "prefname": "東京都",
        "city": [
            {
                "cityid": "02101",
                "cityname": "東京都-新宿区",
                "town": [{"townid": "0210101", "townname": "東京都-新宿区-1区"},
                         {"townid": "0210102", "townname": "東京都-新宿区-2区"}
                        ]
            },
            {
                "cityid": "02102",
                "cityname": "東京都-中央区",
                "town": [{"townid": "0210201", "townname": "東京都-中央区-1区"},
                         {"townid": "0210202", "townname": "東京都-中央区-2区"}
                        ]
            }
        ]
    }
]

投稿2021/01/24 06:51

68user

総合スコア2022

niko_hiyoko

2021/01/24 07:42

すみません・・・もう、本当にコピペで、ちょっと悩んだら何とかならないかと、１日のたうちまわっていました。 JSONのデータのご提案までありがとうございます！！！また、机に戻ったら、お二人のアドバイスを下にしっかり検証してみます！！！２回もコメントありがとうございます！

niko_hiyoko

2021/01/24 13:35

コードのプレビュー行いました。当たり前かもしれませんが・・・問題なく動いておりました。今の私には、知らないメソッドがおおく、ぱっとは理解できないのですが、一つ一つメソッドの意味を確認しながら、理解するようにがんばります。本当にありがとうございました！

行動規範の内容に同意します

jsonデータの指定方法に問題があるように見えます。

単純にコピペするのではなく解析しようとしているデータ構造を
確認してください。
このデータは配列になっている部分があり、
添え字で指定する箇所とプロパティ名を指定する箇所が交互に必要です。

正しく動いている2つ目のgetJSONの処理を開発者ツールで確認し、
dataを見るとわかると思いますが、dataは以下のように指定されます。

$.getJSON('/json/lesson.json', function (data) {
  for (var i = 0; i < data[key][select_city].city.length; i++) {
    $('#select-city').append('<option value="' + data[key][select_city].city[i].id + '">' + data[key][select_city].city[i].name + '</option>');
  }
});

data[0] = {01: {id: "01", pref: "千葉県", city: Array(2)}}
data[0]["01"] = {id: "01", pref: "千葉県", city: Array(2)}
data[0]["01"].city = [
  0: {id: "101", name: "千葉県-千葉市", cat3: Array(2)},
  1: {id: "0102", name: "千葉県-松戸市", cat3: Array(2)}
]

上記の法則に従って、3つ目のドロップダウン作成処理を正しく動かすためには、
以下のような指定になるように作成する必要があります。

data[0]["01"].city[0].cat3 = [
  0: {id: "010101", name2: "千葉県-千葉市-1区"},
  1: {id: "010102", name2: "千葉県-千葉市-2区"}
]

投稿2021/01/24 05:54

退会済みユーザー

総合スコア0

niko_hiyoko

2021/01/24 07:40

コメントありがとうございます！！！消してしまっているのですが、各varが何の数字を持っているのか？をconsole.logで確認ぐらいまでは調べてたのですが・・・開発者ツールでこの式で何を読んでいるのかわからないものか？と悩んでおりました！ JS扱うときの開発者ツールの見方も勉強になりました！ありがとうございます！！！

行動規範の内容に同意します

あなたの回答