Question

Ajax 未捕获 TypeError：无法读取未定义的属性“length”

2017-03-01

2192

javascript jquery html json ajax

我想用来自外部 URL 的 json 数据填充我的选择框。

我不断收到

Uncaught TypeError: Cannot read property 'length' of undefined

下面是我的 json 响应

{"ecoachlabs":{
  "status":"201",
  "msg":"Form data loaded successfully.",
  "categories":[
    {"id":"2","category":"church"},{"id":"3","category":"financial institution"},
    {"id":"4","category":"old students association"},
    {"id":"1","category":"school"},
    {"id":"5","category":"tertiary"}
  ],
  "storage":[
    {"id":"1","category":"100MB"},{"id":"2","category":"250MB"},
    {"id":"3","category":"500MB"},{"id":"4","category":"2GB"},
    {"id":"5","category":"3GB"},{"id":"6","category":"5GB"}
  ]
  }}

下面是我的 ajax 邮政编码

$(document).ready(function() {
  $("#institution_category").click(function() {

    var formData = {
      load_request_form_data: "1"
    }; //Array 

    $.ajax({
      url: "http://api.ecoachlabs.com/v1/requests/api.php",
      type: "POST",
      data: formData,
      success: function(data, textStatus, jqXHR) {
        console.log(data.ecoachlabs.categories); //data - response from server
        $.each(data.categories, function(i, v) {
          $('#institution_category').append($('<option value="' + v.id + '">' + v.category + '</option>'));
        });
      },
      error: function(jqXHR, textStatus, errorThrown) {

      }
    });
  });
});

Answer 1

您执行 onsole.log(data.ecoachlabs.categories); 的控制台日志，然后使用 data.categories 。将 data.categories 更改为 data.ecoachlabs.categories 以正确解析对象，否则您将得到 undefined 。请参阅下面的工作代码片段：

var formData = {
  load_request_form_data: "1"
}; //Array 

$.ajax({
  url: "http://api.ecoachlabs.com/v1/requests/api.php",
  type: "POST",
  data: formData,
  success: function(data, textStatus, jqXHR) {
    console.log(data.ecoachlabs.categories); //data - response from server
    $.each(data.ecoachlabs.categories, function(i, v) {
      $('#institution_category').append($('<option value="' + v.id + '">' + v.category + '</option>'));
    });
  },
  error: function(jqXHR, textStatus, errorThrown) {

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='institution_category'>

</select>

Answer 2

继续前检查是否存在

if (!data || !data.length) return;

<script type="text/javascript">
        $(document).ready(function() {
        $("#institution_category").click(function(){

            var formData = {load_request_form_data:"1"}; //Array 

            $.ajax({
                url : "http://api.ecoachlabs.com/v1/requests/api.php",
                type: "POST",
                data : formData,
                success: function(data, textStatus, jqXHR)
                {
                   if (!data || !data.length) return; // data not always exist or not always contains ecoachlabs/categories
                   console.log(data.ecoachlabs.categories);//data - response from server
                   $.each(data.categories, function(i, v){
                      $('#institution_category').append($('<option value="' + v.id + '">' + v.category + '</option>'));
                    });
                },
                error: function (jqXHR, textStatus, errorThrown)
                {

                }
            });
        });
        });
     </script>