Ajax Uncaught TypeError：未定義のプロパティ 'length'を読み取ることができません

Question

外部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

チェック `存在data.categories`ん

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>