Javascript return me object Object

Question

I have this code to create datatable with datatables.net plugin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type='text/javascript' src='//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>

        <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
        <link type="text/css" href="https://cdn.datatables.net/1.10.3/css/jquery.dataTables.css" />
        <link type="text/css" href="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css" />

        <script src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script>

        <script type='text/javascript' src="https://datatables.net/release-datatables/extensions/KeyTable/js/dataTables.keyTable.js"></script>

    </head>
    <body>
        <script type="text/javascript">
            //   function day2Date( day, year ) {
            // return new Date(year,0,day);
            //}
            $(document).ready(function() {

                $('#example').dataTable({
                    "ajax": "table1.php",
                    "columns": [{
                            "data": "ID"
                        }, {
                            "data": "naziv"
                        }, {
                            "data": "vrsta"
                        },

                    ],
                    "columnDefs": [{
                        "targets": 2,
                        "data": "download_link",
                        "render": function(data, type, full, meta) {
                            // return data; 
                            return '<button class="btn btn-success">' + data + '</button>';
                        }
                    }]
                });
            });
            var table = $('#example').DataTable();
            $(document).ready(function() {
                $('#example tbody').on('click', 'td', function() {
                    console.log('Data:' + $(this).html().trim() + 'Row:' + $(this).parent().find('td').html().trim() + 'Column:' + $('#example thead tr th').eq($(this).index()).html().trim());
                    // alert('Row:'+$(this).parent().find('td').html().trim());
                    //alert('Column:'+$('#example thead tr th').eq($(this).index()).html().trim());

                });
                $('#example tbody').on('click', 'tr', function() {
                    console.log('Row index: ', table.row(this).index());
                });
            });
        </script>
        <div class="container">
            <table id="example" class="table table-striped table-bordered table-responsitive" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Naziv</th>
                        <th>Vrsta</th>

                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Naziv</th>
                        <th>Vrsta</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>

I need to get row index so I write as you can see from code above:

$('#example tbody').on( 'click', 'tr', function () {
    console.log( 'Row index: '+table.row( this ).index() );

like I see on documentation on datatables web site but this code return me only [object Object]

example:

Data:12Row:2Column:Naziv 
Row index: [object Object]

Why? Sombody have explanation?

do a console.log just on the object itself. developer tools will then show more info about the object, instead of just the .toString() value which returns [object Object]. so, do a console.log(table.row(this).index()) and see what that object really is. — DLeh
– DLeh, Commented Nov 3, 2014 at 14:32
The only difference between your example and the example here is that they use alert instead of console.log, could you try changing it to an alert to see if the same happens? — Nunners
– Nunners, Commented Nov 3, 2014 at 14:42
@ Nunners: That will not (or certainly should not) make any difference. — iCollect.it Ltd
– iCollect.it Ltd, Commented Nov 3, 2014 at 14:45
@TrueBlueAussie I was hoping it wouldn't make a difference, so we could at least narrow it down to the function call itself — Nunners
– Nunners, Commented Nov 3, 2014 at 14:47
@ OP - Are you sure there is no extra code involved with this? I cannot reproduce this issue in any browser. — Nunners
– Nunners, Commented Nov 3, 2014 at 14:50

iCollect.it Ltd · Accepted Answer · 2014-11-03 15:22:01Z

2

You have included one key line of code outside any DOM ready handler, but before the element to which it occurs. That means that $('#example') is not returning a match:

Put this line in the DOM ready handler:

var table = $('#example').DataTable();

e.g

$(document).ready(function () {
    var table = $('#example').DataTable();
    $('#example tbody').on('click', 'td', function () {
        console.log('Data:' + $(this).html().trim() + 'Row:' + $(this).parent().find('td').html().trim() + 'Column:' + $('#example thead tr th').eq($(this).index()).html().trim());
        // alert('Row:'+$(this).parent().find('td').html().trim());
        //alert('Column:'+$('#example thead tr th').eq($(this).index()).html().trim());

    });
    $('#example tbody').on('click', 'tr', function () {
        console.log('Row index: ', table.row(this).index());
    });
});

edited Nov 3, 2014 at 15:22

answered Nov 3, 2014 at 14:51

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iCollect.it Ltd Over a year ago

@James D.: Amazing the difference full code can make :)

Jivings · Accepted Answer · 2014-11-03 14:42:15Z

2

When you do a String concatenation on a JavaScript Object it will implicitly call toString() on the Object.

The default Object.toString() simply returns [object Object].

To print out the contents of the Object use console.log with two arguments:

console.log( 'Row index:', table.row( this ).index() );

If I test on the DataTable example website then it appears to work as expected, and the result is a Number, so I think there must be some information missing from your question...

var table = $('#example').DataTable()
> []
table.row(1).index()
> 1

edited Nov 3, 2014 at 14:42

answered Nov 3, 2014 at 14:32

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

7 Comments

James D. Over a year ago

again is the same, dont work, problem is something else

akonsu Over a year ago

does "dont work" mean that the suggested call prints Row index: [object Object]?

Jivings Over a year ago

Seems to work fine for me on their example site. I'll update my answer.

iCollect.it Ltd Over a year ago

The row() index() method should be returning an integer, so it would appear this problem has nothing to do with the string conversion of an object.

Jivings Over a year ago

@TrueBlueAussie Looks like it.

|

Collectives™ on Stack Overflow

Javascript return me object Object

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related