Ajax Uncaught TypeError: Kann Eigenschaft "Länge" von undefined nicht lesen

Question

Ich möchte meine Auswahlbox mit JSON-Daten von einer externen URL füllen.

Ich bekomme ständig

Uncaught TypeError: Cannot read property 'length' of undefined

unten ist meine Json Antwort

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

unten ist mein Ajax Postleitzahl

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

Sie haben eine Konsole log von onsole.log(data.ecoachlabs.categories); und dann data.categories verwenden. Ändern Sie data.categories zu data.ecoachlabs.categories, um das Objekt korrekt zu analysieren, andernfalls erhalten Sie undefined. Siehe das Arbeits Snippet unten bitte:

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

Überprüfen Sie, ob vorhanden sein, bevor

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>