Array of objects prints but errors trying to use render

xanabobana

Link to test case: https://dev.vmc.w3.uvm.edu/xana/climateIndicators/subCatPage/1/13/35
Debugger code (debug.datatables.net):
Error messages shown: DataTables warning: table id=subCatTable - Requested unknown parameter 'methods[]' for row 0, column 5. For more information about this error, please see http://datatables.net/tn/4
Description of problem:

I'm able to display the methodName in my array of objects using the following code:

{data: 'methods[, ].methodName' },

However, I want to make a hyperlink so I tried to write a function using render like this:

{data: 'methods[]',
                   render: function(data, row){
                       var output='';
                       $.each(data, function(index, item){
                           output+='<a href="'+data[index].methodDocUrl+'" target="_blank">'+data[index].methodName+'</a>'
                       });
                   }
                },

But I get the error that suggests the data type is not correct? I have a very similar example (see the Year column below) using an array of objects so I'm not sure why this one doesn't work. The data can be seen in the developer console at the URL listed above (I did a console.log)

Here is the full table definition:

        var subCatTable = $('#subCatTable').DataTable({
            "columnDefs": [
                {
                    "targets": 0,
                    "createdCell": function (cell, cellData, rowData, rowIndex, colIndex) {
                        var html = "<input type ='checkbox' class='project-select-ckbx' id='" + rowData.studyID + "'>"
                        $(cell).html(html)
                    }
                },
                {"targets": 2,
                    "orderable": true,
                    "createdCell": function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).html('<a href="#studyinfo" data-toggle="modal" data-target="#studyModal" class="viewstudy color__green font__semibold" value="' + rowData.studyID + '">' + cellData + '</a>')
                    }
                },
                {"targets":6, "visible":false,},
                {"targets": 7,
                    "visible": false,
                }
            ],
            "data": tableInfo,
            "columns": [
                {data: null,
                    orderable: false,
                },
                {data: 'studyID',
                    orderable: true
                },
                {data: 'title',
                    orderable: true
                },
                {data: 'yearInts[]',
                    render: function (data, row) {
                        var output = '';
                        $.each(data, function (index, item) {
                            output += '<p>' + data[index].intStartYr + '-' + data[index].intEndYr + '</p>';
                        });
                        return output;
                    }
                },
                {data: 'states'},
                {data: 'methods[]',
                   render: function(data, row){
                       var output='';
                       $.each(data, function(index, item){
                           output+='<a href="'+data[index].methodDocUrl+'" target="_blank">'+data[index].methodName+'</a>'
                       });
                   }
                },
                {data: 'studyID'},
                {data: 'indicators.ciSubCats'}
            ]

        });

Thank you!

kthorngren

You need to return the data you want displayed, for example:

           render: function(data, row){
               var output='';
               $.each(data, function(index, item){
                   output+='<a href="'+data[index].methodDocUrl+'" target="_blank">'+data[index].methodName+'</a>'
               });
               return output;
           }

The same as your previous column.

Kevin