Saya sudah mendapatkan JSON ini - address.json

{
  "province": [
    {
      "id": "1",
      "name": "province1",
      "district": [{
          "districtID": "1",
          "districtName": "district1"
        }
      ]
    }, {
      "id": "2",
      "name": "province2",
      "district": [{
          "districtID": "2",
          "districtName": "district2"
        }, {
          "districtID": "3",
          "districtName": "district3"
        }
      ]
    }
  ]
}

Kode HTML

 <label for="addressProvince">State: </label>
 <select id="addressProvince"></select>

Javascript

//Province
$(function(){

    $.getJSON("address.json", function(data) {

        console.log( "success1");


        var provinceCount = data.province.length;
        var provinceList = '<option selected="selected" value="0">- select -</option>';

        for (var i = 0; i < provinceCount; i++) {
             provinceList += "<option value='" + data.province[i].id + "'>" + data.province[i].name + "</option>";
        }
        $("#addressProvince").html(provinceList);

    });
});

    //District  
    $('#addressProvince').on('change', function () {

    var provinceID = $(this).val();

    $.getJSON("address.json", function(data) {

        console.log( "success2");

        var provinceCount = data.province.length;

        for (i = 0; i < provinceCount; i++) {

                if(data.province[i].id == provinceID){

                    console.log("dis case 1 = "+ data.province[i].district.length); //***Problem case 1****

                    console.log("dis case 2 = "+ data[0].province[i].district.length); //***Problem case 2****

                    console.log("dis case 3 = "+ data[0].province[i].district[0].districtName); //***Problem case 3****
                }

        }

    });

});
//End District

Bagaimana cara mendapatkan panjang distrik? Console.log saya melaporkan kesalahan

Laporan Kasus 1 :

TypeError Tidak Tertangkap: Tidak dapat membaca properti 'panjang' dari undefined

Laporan Kasus 2 :

TypeError Tidak Tertangkap: Tidak dapat membaca properti 'provinsi' dari undefined

Laporan Kasus 3 :

TypeError Tidak Tertangkap: Tidak dapat membaca properti 'provinsi' dari undefined

-1
Kittiphat Rueangphaophan 11 Desember 2017, 19:47

1 menjawab

Jawaban Terbaik

Saran pertama, kerjakan satu per satu. Hapus bit 'fetch stuff from the back-end', dan buat rintisan JSON yang berfungsi yang dapat Anda gunakan untuk pengembangan. Misalnya, gunakan kode JSON yang Anda berikan kepada kami, dan buat objek Anda dari itu. Sekarang, dengan menggunakan bit itu, tulis kode yang akan mengulangi objek yang baru Anda buat. Jika Anda bisa membuat bagian ITU berfungsi, tidak masalah jika JSON berasal dari variabel sebaris, variabel yang diteruskan secara statis yang ditetapkan oleh PHP, atau panggilan getJSON.

Hal berikutnya yang perlu diperhatikan, mengapa Anda mengambil JSON lagi setiap kali pengguna mengubah opsi provinsi? Anda sudah memiliki informasi itu dalam data Anda, jadi mengambilnya lagi hanya membuang-buang biaya. Gunakan apa yang sudah Anda miliki.

Ketiga, meskipun Anda dapat menggunakan for loop, karena Anda menggunakan jQuery, gunakan $.each() untuk mengulangi daftar. IMHO, ini berhasil, dan tampaknya sedikit lebih intuitif. Semua yang dikatakan, coba kode ini:

var data = {
  "province": [{
    "id": "1",
    "name": "province1",
    "district": [{
      "districtID": "1",
      "districtName": "district1"
    }]
  }, {
    "id": "2",
    "name": "province2",
    "district": [{
      "districtID": "2",
      "districtName": "district2"
    }, {
      "districtID": "3",
      "districtName": "district3"
    }]
  }]
};

//Province
$(function() {
  // create references to the various els in the DOM.
  var provincePane = $(".provinceSelector");
  var districtPane = $(".districtSelector");
  var addressProvinceEl = $("#addressProvince");
  var addressDistrictEl = $("#addressDistrict");
  // create a blank option, we'll use this as the default el.
  var defaultEl = $("<option>")
                      .prop("selected", true)
                      .val("0")
                      .text("- select -");
                      
  // Insert a copy of that default element into the province select.
  addressProvinceEl.append(defaultEl.clone());

  // Using jQuery's each function, we can loop over every data.province
  $.each(data.province, function(){
    // create an option el for this particular province.
    var optionEl = $("<option>")
                    .val(this.id)
                    .text(this.name);
    // append the option into the select.
    addressProvinceEl.append(optionEl);
  })

  //District  
  addressProvinceEl.on('change', function() {
    // get the value of the currently selected option
    var provID = parseInt(this.value);
    // remove all options but the default option from the district select el
    addressDistrictEl.empty();
    addressDistrictEl.append(defaultEl.clone() );

    // If the user has gone back to '- select -', hide the district pane
    if (provID == 0) {
      districtPane.hide();
    } else {
      // otherwise, display the district pane.
      districtPane.show();
    }
    
    // iterate over the province list, and find the one matching 
    //   the selected option.
    $.each(data.province, function(){
      if(this.id == provID) {
        // We found a match! Now, using the current province, iterate 
        //  over the district list.
        $.each(this.district, function(){
          // create a new option for each district, setting properties...
          var optionEl = $("<option>")
                          .val(this.districtID)
                          .text(this.districtName);
          // ... and append that new option into the district selector.
          addressDistrictEl.append(optionEl);
        })
      }
    })

  });

});
//End District
.districtSelector {
  display: none;
}

label {
  display: inline-block;
  width: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="provinceSelector">
  <label for="addressProvince">State: </label>
  <select id="addressProvince"></select>
</div>
<div class="districtSelector">
  <label for="addressDistrict">District: </label>
  <select id="addressDistrict"></select>
</div>

Semua yang dikatakan, saya kembali ke kode ANDA daripada kode saya di atas, cukup menghapus bit getJSON, menyimpan objek JSON sebagai variabel data, dan menjalankan kode Anda apa adanya. Saya tidak mendapatkan kesalahan pada pemilih data pertama (data.province[i].district.length), tetapi dua lainnya melakukan kesalahan, karena data (misalnya) bukan array - ini adalah objek. Ini adalah objek tingkat root, yang hanya ada satu. Setidaknya, saya pikir begitulah cara kerjanya. Untuk melihatnya berfungsi sebagai biola, atau ini kode Anda tanpa bit getJSON().

var data = {
  "province": [{
    "id": "1",
    "name": "province1",
    "district": [{
      "districtID": "1",
      "districtName": "district1"
    }]
  }, {
    "id": "2",
    "name": "province2",
    "district": [{
      "districtID": "2",
      "districtName": "district2"
    }, {
      "districtID": "3",
      "districtName": "district3"
    }]
  }]
};

//Province
$(function() {
  console.log("success1");


  var provinceCount = data.province.length;
  var provinceList = '<option selected="selected" value="0">- select -</option>';

  for (var i = 0; i < provinceCount; i++) {
    provinceList += "<option value='" + data.province[i].id + "'>" + data.province[i].name + "</option>";
  }
  $("#addressProvince").html(provinceList);

  //District  
  $('#addressProvince').on('change', function() {

    var provinceID = $(this).val();
    console.log("success2");

    var provinceCount = data.province.length;

    for (i = 0; i < provinceCount; i++) {

      if (data.province[i].id == provinceID) {

        console.log("dis case 1 = " + data.province[i].district.length); //***Problem case 1****

        //console.log("dis case 2 = " + data[0].province[i].district.length); //***Problem case 2****

        //console.log("dis case 3 = " + data[0].province[i].district[0].districtName); //***Problem case 3****
      
      for (var j = 0; j < data.province[i].district.length; j++){
        var district = data.province[i].district[j];
        var optionEl = "<option value='"+district.districtID+"' >"+district.districtName+"</option>";
        $("#addressDistrict").append(optionEl);
      }
      }
    }

  });
});
//End District
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="provinceSelector">
  <label for="addressProvince">State: </label>
  <select id="addressProvince"></select>
</div>
<div class="districtSelector">
  <label for="addressDistrict">District: </label>
  <select id="addressDistrict"></select>
</div>
2
Snowmonkey 11 Desember 2017, 19:44