row details when I have array of arrays

culter

Hi guys, I'm trying to adapt this to my solution. The difference is, that I have array of arrays, instead of array of objects as in the example.

My JSON is like this:

{
    "draw": 1,
    "recordsTotal": 227,
    "recordsFiltered": 227,
    "data": [
        ["321231", "1321", "Bern", "2018-09-22 08:12:52", "C", "1", "transfer", "0", "A", "ano", "Bruggy", "HO", "12231"],
        ["321232", "2267", "Bern", "2018-09-23 09:13:11", "C", "1", "transfer complete", "1", "B", "ne", "Bern", "HA", "2123"],
        ["321233", "3357", "Pra", "2018-09-23 09:13:11", "C", "1", "transfer complete", "2", "C", "ne", "Bud", "HI", "31231"]
}

I have 7 rows in the table, the additional rows are loaded for the row details.

This is my html and script

 <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>NO</th>
                <th>OBJECT</th>
                <th>CITY</th>
                <th>DATE</th>
                <th>TERM</th>
                <th>STATUS</th>
                <th>DESC</th>
            </tr>
        </thead>
      </table>

<script>

function format ( d ) {
    return 'Name: '+d.NO+' '+d.OBJECT+'<br>'+
        'Additional: '+d.CITY+'<br>'+
        'any data.';
}



// MINE INICIALISATION SCRIPT
$(document).ready(function() {
   var dt = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
                "url": "scripts/server_processing.php",
                },
        columns: [
                {
                        "className":    'details-control',
                        "orderable":    false,
                        "data":         null,
                        "defaultContent":       ''
                },
                {data: 0},
                {data: 1},
                {data: 2},
                {data: 3},
                {data: 4},
                {data: 5},
                {data: 6}
        ],
        "lengthMenu": [[10,25,50,100],[10,20,50,100]],
        "order": [[1, 'asc']],
    } );


 // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#tickety tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('NO'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('NO') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, NO ) {
            $('#'+NO+' td.details-control').trigger( 'click' );
        } );
    } );
} );

</script>

All I need is to show e.g. 8. value of according row in the row details. Now when I access the page and click on plus sign, I get

Name: undefined undefined
Additional: undefined
any data

Thank you.

kthorngren

The easiest way to understand what you need is to add console.log(d); to your format function. Then you will see your data structure.

As you see this won't work with your data structure:
'Name: '+d.NO+' '+d.OBJECT+'<br>'

Instead of d.NO you will either need d[0] to access the array element or d.0 to access the data as an object. I'm not sure which you will need since you are using columns.data with an array structure. I've never tried it

Kevin

culter

Thank you, Kevin. Again. I tried d[0] and the result is

Uncaught SyntaxError: Unexpected token [

and d.0 gives

Uncaught SyntaxError: Unexpected number

the messages in the console are the same

I've tried many similar options without success

kthorngren

Did you add the console.log message to see what the actual data is in the format function?

Uncaught SyntaxError: Unexpected token [

That is a syntax error in your code not necessarily an issue with accessing the data. Without seeing the full line of code its hard to say what the problem is.

Kevin

culter

I added it like this but I can't find anything else in the browser's console.

function format ( d ) {
    return 'Name: '+d.NO+' '+d.OBJECT+'<br>'+
        'Additional: '+d.CITY+'<br>'+
        'any data.';
    console.log(d);
}

kthorngren

It needs to be before the return statement. Anything after the return won't be executed.

function format ( d ) {
    console.log(d);
    return 'Name: '+d.NO+' '+d.OBJECT+'<br>'+
        'Additional: '+d.CITY+'<br>'+
        'any data.';
}

Kevin

culter

Thanks Kevin, now I get:

(13) ["321231", "1321", "Bern", "2018-09-22 08:12:52", "C", "1", "transfer", "0", "A", "ano", "Bruggy", "HO", "12231"],
0: "321231"
1: "1321"
2: "Bern"
3: "2018-09-22 08:12:52"
4: "C"
5: "1"
6: "transfer"
7: "0"
8: "A"
9: "ano"
10: "Bruggy"
11: "HO"
12: "12231"
length: 13
proto: Array(0)

culter

I got it, the d[0] is right. I think I used d.[0]. I'm ashamed

Thank you so much, Kevin. I think, after all of your kind help I owe you at least a beer !

kthorngren

I'll PM you my beer order

Kevin