Uncaught TypeError: Cannot read property 'splice' of undefined

bhatt_axay · January 2016

What this error means? It occur while my data is fetching from the database to dataTable. I am using pipeling concept of dataTable.

allan · January 2016

Per the forum rules, please link to a test case showing the issue so it can be debugged.

Allan

bhatt_axay · January 2016

'<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">

$.fn.dataTable.pipeline = function ( opts ) {

var conf = $.extend( {
    pages: 5,    
    url: '',     
    data: null,  

    method: 'GET'
}, opts );


var cacheLower = -1;
var cacheUpper = null;
var cacheLastRequest = null;
var cacheLastJson = null;

return function ( request, drawCallback, settings ) {
    var ajax          = false;
    var requestStart  = request.start;
    var requestLength = request.length;
    var requestEnd    = requestStart + requestLength;

    if ( settings.clearCache ) {

        ajax = true;
        settings.clearCache = false;
    }
    else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {

        ajax = true;
    }
    else if ( JSON.stringify( request.order )   !== JSON.stringify( cacheLastRequest.order ) ||
              JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
              JSON.stringify( request.search )  !== JSON.stringify( cacheLastRequest.search )
    ) {

        ajax = true;
    }


    cacheLastRequest = $.extend( true, {}, request );

    if ( ajax ) {

        if ( requestStart < cacheLower ) {
            requestStart = requestStart - (requestLength*(conf.pages-1));

            if ( requestStart < 0 ) {
                requestStart = 0;
            }
        }

        cacheLower = requestStart;
        cacheUpper = requestStart + (requestLength * conf.pages);

        request.start = requestStart;
        request.length = requestLength*conf.pages;

        if ( $.isFunction ( conf.data ) ) {

            var d = conf.data( request );
            if ( d ) {
                $.extend( request, d );
            }
        }
        else if ( $.isPlainObject( conf.data ) ) {
            // As an object, the data given extends the default
            $.extend( request, conf.data );
        }

        settings.jqXHR = $.ajax( {
            "type":     conf.method,
            "url":      conf.url,
            "data":     request,
            "dataType": "json",
            "cache":    false,
            "success":  function ( json ) {
                cacheLastJson = $.extend(true, {}, json);

                if ( cacheLower != requestStart ) {
                    json.data.splice( 0, requestStart-cacheLower );
                }
                json.data.splice( requestLength, json.data.length );

                drawCallback( json );
            }
        }); 
    }
    else {
        json = $.extend( true, {}, cacheLastJson );
        json.draw = request.draw; // Update the echo for each response
        json.data.splice( 0, requestStart-cacheLower );
        json.data.splice( requestLength, json.data.length );

        drawCallback(json);
    }
}

};

    $.fn.dataTable.Api.register( 'clearPipeline()', function () {
        return this.iterator( 'table', function ( settings ) {
        settings.clearCache = true;
        } );
    } );
    $(document).ready(function() {
    $('#example').dataTable( {
     "aProcessing": true,
     "aServerSide": true,
        "ajax": $.fn.dataTable.pipeline( {
            url :"server-response.php",
            pages: 5
            } )
        } );
    });
</script>

</head>

First name	Email	Mobile	Address

</body>
</html>'

bhatt_axay · January 2016

In above code i got the error on 'line no.98:json.data.splice( requestLength, json.data.length );'

It show me
'Uncaught TypeError: Cannot read property 'splice' of undefined'

allan · January 2016

That suggests that there is no data array in the returned JSON. However, without a link to the page, as I requested above, I can't say for sure.

Allan

bhatt_axay · January 2016

But I am working on a localhost how can i give you link?

bhatt_axay · January 2016

It returns me 'http://localhost/datatable/server-response.php?length=NaN&_=1453290385040'

allan · January 2016

You would need to use JSFiddle, CodePen or similar to built a working test case if you cannot host it yourself.

Allan

bhatt_axay · January 2016

Uncaught ReferenceError: drawStart is not defined

settings.jqXHR.$.ajax.success index.php:90

jquery.js:2k.fireWith

jquery.js:2x

jquery.js:5b

jquery.js:5

What the above error means?

bhatt_axay · January 2016

Okk Thanks I got it

But still my json array is not display in the datatable from the database

bhatt_axay · January 2016

It returns me in console log like: length=Nan&_=1453369326998

allan · January 2016

As I mentioned three times above we would need a test case showing the issue in order to be able to offer any help.

bhatt_axay · January 2016

https://jsfiddle.net/bhatt_axay/8a1qbb27/

bhatt_axay · January 2016

But i cannot upload my server-response.php file on jsfiddle

allan · January 2016

You can use the /echo/json feature of JSFiddle to simulate it: http://doc.jsfiddle.net/use/echo.html .

Allan

bhatt_axay · January 2016

Please check it: http://live.datatables.net/vasixume/1/

bhatt_axay · January 2016

http://live.datatables.net/vasixume/1/edit

bhatt_axay · January 2016

Hello,

I got my data in my datatable but other features of datatable not working like pagination,searching.

bhatt_axay · January 2016

My data-table doesn't show me bInfo, search and pagination features of datatable still my data is present in datatable.

Here is the code.

'<meta name = "viewport" content = "width = device-width, initial-scale = 1">

    <script type="text/javascript" language="javascript" src="js/jquery.js"></script>

    <script type="text/javascript" language="javascript"

src="js/jquery.dataTables.js"></script>

<script type="text/javascript" language="javascript">

$.fn.dataTable.pipeline = function ( opts ) {

var conf = $.extend( {

    pages: 5,   

    url: '',     

    data: null,  

    method: 'GET' 

}, opts );


var cacheLower = -1;

var cacheUpper = null;

var cacheLastRequest = null;

var cacheLastJson = null;

return function ( request, drawCallback, settings ) {

    var ajax          = false;

    var requestStart  = request.start;

    var drawStart     = request.start;

    var requestLength = request.length;

    var requestEnd    = requestStart + requestLength;

    if ( settings.clearCache ) {

        ajax = true;

        settings.clearCache = false;


    }

    else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {

        ajax = true;

    }
    else if ( JSON.stringify( request.order )   !== JSON.stringify(

cacheLastRequest.order ) ||
JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
JSON.stringify( request.search ) !== JSON.stringify( cacheLastRequest.search )
) {

        ajax = true;
    }


    cacheLastRequest = $.extend( true, {}, request );

    if ( ajax ) {

        if ( requestStart < cacheLower ) {

            requestStart = requestStart - (requestLength*(conf.pages-1));

            alert(requestStart);

            if ( requestStart < 0 ) {

                requestStart = 0;
            }
        }

        cacheLower = requestStart;
        cacheUpper = requestStart + (requestLength * conf.pages);

        request.start = requestStart;
        request.length = requestLength*conf.pages;


        if ( $.isFunction ( conf.data ) ) {

            var d = conf.data( request );
            if ( d ) {
                $.extend( request, d );
            }
        }
        else if ( $.isPlainObject( conf.data ) ) {

            $.extend( request, conf.data );
        }

        settings.jqXHR = $.ajax( {

            "type":     conf.method,

            "url":      conf.url,

            "data":     request,

            "dataType": "json",

            "cache":    false,

            "success":  function ( json ) {

                cacheLastJson = $.extend(true, {}, json);

                if ( cacheLower != drawStart ) {

                    json.aaData.splice( 0, drawStart-cacheLower );
                }
                json.aaData.splice( requestLength, json.aaData.length );

                drawCallback( json );
            }
        } );
    }
    else {
        json = $.extend( true, {}, cacheLastJson );

        json.draw = request.draw;

        json.aaData.splice( 0, requestStart-cacheLower );

        json.aaData.splice( requestLength, json.aaData.length );

        drawCallback(json);
    }
}

};

$.fn.dataTable.Api.register( 'clearPipeline()', function () {

return this.iterator( 'table', function ( settings ) {

    settings.clearCache = true;

    alert(settings.clearCache);
} );

} );

$(document).ready(function() {

$('#employeeListing').DataTable( {

    "processing": true,

    "serverSide": true,

    "bPaginate": true,

    "ajax": $.fn.dataTable.pipeline( {

        url: 'serv.php',

        pages: 5
    } )
} );

} );

</script>

</head>

<body>

First Name	Email	Contact no.	City

</body>'
</html>

bhatt_axay · January 2016

Hello,

I got my data in my data-table but the inbuilt functionality of table not working like paging, searching, bInfo

bhatt_axay · January 2016

Hello,

My json array response is in a string format and datatable accept integer value as an index value of an array. Now when i use fetch_array() than it returns me both array value like:

E.g:

{"aaData":[{"0":"abc","fullname":"abc","1":"abc@gmail.com","user_name":"abc@gmail.com","2":"74653696","phnumber":"74653696","3":"xyz","address":"xyz"}]}

bhatt_axay · January 2016

Hello,

I resolve my problem of getting json array error using aColumns :[{ aMdata:"fullname", "aTargets" : [0] }]

Thanks

bhatt_axay · January 2016

But still my datatable inbuilt features not working like searching, sorting, bInfo etc

allan · January 2016

I think you might have opened a new thread about this. Is that correct?

I'm sorry if I wasn't clear before - but without a test case showing the issue I cannot and will not debug this.

Allan

fradkilo700 · September 2016

The solution to this problem is to change json.data to json.[name of your data array]. like in my case, my data array from server-side is aaData, therefore i changed json.data to json.aaData it worked pretty fine.

Uncaught TypeError: Cannot read property 'splice' of undefined

Uncaught TypeError: Cannot read property 'splice' of undefined

Answers

Howdy, Stranger!

Categories

DataTables

Uncaught TypeError: Cannot read property 'splice' of undefined

Uncaught TypeError: Cannot read property 'splice' of undefined

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables