Loading json data in div using Ajax(Uncaught TypeError: Cannot read property 'length' of undefined)

I am trying to implement infinity scroll in my project. I created 3 page index.php, ajax.php and script.js. Index is working fine. Ajax.php returning data in json format from mysql database.

Problem with script.js Below are the codes.

Script.js :

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
        first = $('#first').val();
        limit = $('#limit').val();
        no_data = true;
        if(flag && no_data){
            flag = false;
            $('#loader').show();

            $.ajax({
                url : 'ajax.php',
                dataType: "json",
                type: 'post',
                data: {
                   start : first,
                   limit : limit
                },
                success: function( data ) {
                    flag = true;
                    $('#loader').hide();

                    if(data.count > 0 ){
                        first = parseInt($('#first').val());
                        limit = parseInt($('#limit').val());
                        $('#first').val( first+limit );
                        $( "#jc" ).append( "<p>Test</p>" );
                        //$('#jc').append();
                        $.each(data.content, function(key, value ){
                            alert(value.name);
                            //$( "#jc" ).append( "<p>Test1</p>" );
                            html +=value.name;
                            html += '<span class="month"><i class="fa fa-calendar"></i>'+value.name+'</span><p>&nbsp;</p>';
                            html += '<p><a href="'+value.email+'" target="_blank">Demo </a></p>';
                            html += '<p><a href="'+value.job_description+'" target="_blank">Tutorial </a></p>';


                            html += '<p>'+value.mobile+'</p>';
                            html += '</li>';
                            $('#jc').append( html );


                        });

                    }else{
                        alert('No more data to show');
                        no_data = false;
                    }
                },
                error: function( data ){
                    flag = true;
                    $('#loader').hide();
                    no_data = false;
                    alert('Something went wrong, Please contact admin');
                }
            });
        }


    }
}); 

It seems like

`$.each(data.content, function(key, value ){` 

issue with this line because after this i put alert tag but it is not firing.

Json data

{"count":2,"0":{"name":" Admin","email":"[email protected]","description":"We are looking json data. ","mobile":"123456789","newDate":"01-Apr-2016"},"1":{"name":"Raja","email":"[email protected]","description":"testing testing ","mobile":"43455435422","newDate":"31-Mar-2016"}}

I checked in console and found this error. jquery-2.1.3.min.js:2 Uncaught TypeError: Cannot read property 'length' of undefined

Answers 1

  • First, In your $.each() right before your alert, you should be iterating over data, not data.content. Your object stored in data does not have a content property.

    Then, in your data object, the first key/value pair is "count":2, so your alert is trying to read the name property of 2. It's only in the other key/value pairs that your value is an object with a name property.

    You could try checking if the value has a name property before trying to call it:

    $.each(data, function(key, value ){
        if (value.name) {
            alert(value.name);
        }
    
        // etc.
    

Related Articles