Заполните выбор из вложенного файла JSON с помощью Ajax

Question

Мне нужно заполнить ajax выпадающим списком провинция в зависимости от выбранного региона .У меня есть функция, которая заполняет раскрывающийся список выбора региона при загрузке Windows:

$(function(){
let dropdown = $('#region');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Please choose your region</option>');
dropdown.prop('selectedIndex', 0);

const url = 'data.json';

// Populate dropdown with list of provinces
$.getJSON(url, function (data) {
  $.each(data, function (key, entry) {
    dropdown.append($('<option></option>').attr(entry.region_name).text(entry.region_name);
  })
});

});

Обзор структуры JSON:

{
  "01": {
    "region_name": "REGION I",
    "province_list": {
      "province_1": {
        "city_list": {
          "city-1": {
            "street_list": [
              "street-1"
            ]
          },
          "city-2": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          }
        }
      }
    }
  },
  "02": {
    "region_name": "REGION II",
    "province_list": {
      "province_1": {
        "city_list": {
          "city-1": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          }
        }
      },
      "province_2": {
        "city_list": {
          "city-1": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          },
          "city-2": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          }
        }
      }
    }
  }
}

HTML выглядит так:

<form id="selectForm">
   <div class="region-select">
      <select id="region" name="region">
      </select>
   </div>
   <div class="province-select">
      <select id="province" name="province">
      </select>
   </div>
</form>

Теперь мне нужно заполнить раскрывающийся список выбора провинции в зависимости от выбранного региона, но я не могу этого сделать, потому что мои знания в jquery ограничены.

Мой запрос ajax выглядит следующим образом:

  var region = $('#region');
  var province = $('#province');

$(function() {
      region.change(function() {
          $.ajax({
              url: 'data.json',
              dataType: 'json',
              success: function(data) {

                  function findRegionId(data, provinceId) {
                      for (var i in data.region_name) {
                          for (var j in data.region_name[i].province_list) {
                              if (data.region_name[i].id == provinceId) {
                                  return (data.region_name[i].province_list);
                              }
                          }
                      }
                  }

                  var curRegionVal = region.find(':selected').data('value');
                  var curRegionId = findRegionId(data, +curRegionVal);

                      for (var populateProvince in curRegionId) {

                          $populateOpt = $('<option value="' + curRegionId[populateProvince] + '">' + curRegionId[populateProvince] + '</option>');
                          province.append($populateOpt);
                      }


              },
              statusCode: {
                  404: function() {
                      alert('There was a problem with the server. Try again soon!');
                  }
              }
          });
      });
  });

Этот код не заполняет окно выбора провинции. Любая помощь приветствуется