CODEWITHSUNDEEP
javascriptjqueryhtmljsonajax
SoftServe
SoftServe

Reputation: 67

Ajax Uncaught TypeError: Cannot read property 'length' of undefined

I want to populate my select box with json data from an external url.

I keep getting

Uncaught TypeError: Cannot read property 'length' of undefined

below is my json response

{"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"}
  ]
  }}

below is my ajax post code

$(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) {

      }
    });
  });
});

Upvotes: 1

Views: 2209

Answers (2)

ayxos
ayxos

Reputation: 408

Check if exist before continue

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>

Upvotes: 0

Ionut Necula
Ionut Necula

Reputation: 11472

You do a console log of onsole.log(data.ecoachlabs.categories); and then use data.categories. Change data.categories to data.ecoachlabs.categories to parse the object correctly, otherwise you will get undefined. See the working snippet below please:

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>

Upvotes: 5

Related Questions