Unknown Parameter Error for row 4, column 1 error.

kristy88

Hello, I was hoping someone could help me with an error I'm having with my code. I keep getting an "Unknown Parameter Error for row 4, column 1 error". It's weird because I get the pop-up error, but my table still loads with all of the data.

Javascript:

$(document).ready(function() {
    var table = $('#example').DataTable( {
         "ajax": {
            "url": "roster.json",
            // "dataType": "jsonp",
            "dataSrc": "SiteKit.Roster",
        },
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "height" },
            { "data": "weight" },
            { "data": "birthdate" },
            { "data": "birthtown" },
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

Json:

{
"SiteKit":{
"Parameters":{
"feed":"modulekit",
"view":"roster",
"key":"xxx",
"fmt":"json",
"client_code":"123",
"lang":"en",
"season_id":60,
"team_id":"123",
"lang_id":1,
"league_id":"4"
},
"Roster":[
{
"id":"5512",
"birthtown":"Toronto, Ontario",
"height":"5-11",
"weight":"196",
"birthdate":"1991-06-25",
"tp_jersey_number":"2",
"draftinfo":[
],
"name":"Test Name 1",
"player_image":"http://via.placeholder.com/350x150"
},
{
"id":"5512",
"birthtown":"Winnipeg, Manitoba",
"height":"5-11",
"weight":"196",
"birthdate":"1991-06-25",
"tp_jersey_number":"2",
"draftinfo":[
],
"name":"Test Name 2",
"player_image":"http://via.placeholder.com/350x150"
},
{
"id":"5512",
"birthtown":"Calgary, Alberta",
"height":"5-11",
"weight":"196",
"birthdate":"1991-06-25",
"tp_jersey_number":"2",
"draftinfo":[
],
"name":"Test Name 3",
"player_image":"http://via.placeholder.com/350x150"
},
{
"id":"5512",
"birthtown":"Edmonton, Alberta",
"height":"5-11",
"weight":"196",
"birthdate":"1991-06-25",
"tp_jersey_number":"2",
"draftinfo":[
],
"name":"Test Name 4",
"player_image":"http://via.placeholder.com/350x150"
},
[
{
"name":"Coach Name 1",
"coach_id":"313",
"role_id":"5",
"role":"General Manager",
"hometown":"",
"homeprov":"",
"jersey_number":"0",
"start_date":"2018-04-19",
"end_date":"2018-06-17",
"is_admin":"0"
},
{
"name":"Coach Name 2",
"coach_id":"313",
"role_id":"5",
"role":"General Manager",
"hometown":"",
"homeprov":"",
"jersey_number":"0",
"start_date":"2018-04-19",
"end_date":"2018-06-17",
"is_admin":"0"
},
{
"name":"Coach Name 3",
"coach_id":"313",
"role_id":"5",
"role":"General Manager",
"hometown":"",
"homeprov":"",
"jersey_number":"0",
"start_date":"2018-04-19",
"end_date":"2018-06-17",
"is_admin":"0"
},
{
"name":"Coach Name 4",
"coach_id":"313",
"role_id":"5",
"role":"General Manager",
"hometown":"",
"homeprov":"",
"jersey_number":"0",
"start_date":"2018-04-19",
"end_date":"2018-06-17",
"is_admin":"0"
}
]
]
}
}

HTML:

<table id="example" class="display" style="width:100%">
<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Height</th>
        <th>Weight</th>
        <th>DOB</th>
        <th>Birthplace</th>
    </tr>
</thead>
</table>

kthorngren

The problem is with an array of coaches within the roster object:

            {
                "id": "5512",
                "birthtown": "Edmonton, Alberta",
                "height": "5-11",
                "weight": "196",
                "birthdate": "1991-06-25",
                "tp_jersey_number": "2",
                "draftinfo": [],
                "name": "Test Name 4",
                "player_image": "http://via.placeholder.com/350x150"
            },
            [{  <<<< start coach array
                    "name": "Coach Name 1",
                    "coach_id": "313",
                    "role_id": "5",
                    "role": "General Manager",
                    "hometown": "",
                    "homeprov": "",
                    "jersey_number": "0",
                    "start_date": "2018-04-19",
                    "end_date": "2018-06-17",
                    "is_admin": "0"
                },

I'm assuming the coaches aren't showing in your table. If the coaches were not in the array they would show and there wouldn't be an error.

Kevin

kristy88

Do you know how I can make the coaches show in my table? Or possibly just exclude them from showing up all together? The json data I'm using will be an external file so unfortunately, I can't just remove it from there.

kthorngren

You can use ajax.dataSrc as a function to extract SiteKit.Roster, instead of "dataSrc": "SiteKit.Roster",. There is an example in the doc page. I don't have the Javascript handy but you could loop through each item in SiteKit.Roster and copy each object to a new array of objects and if its an array then loop through the array copying each object to the new array. Hope that makes sense.

Kevin

kristy88

Are you referring to the third example on the page? Sorry, I'm not very familiar working with this stuff!

kthorngren

Are you referring to the third example on the page?

Yes.

This code should get you close. Just replace the for loop in the example.

   for (i=0; i < json.SiteKit.Roster.length; i++) {
      var roster = json.SiteKit.Roster[i];
      if (roster.constructor === Array) {
         for (j=0; j < roster.length; j++) {
            tableData.push(roster[j]);
         }
      } else {
          tableData.push(roster);                            
      }
   }
   return tableData;

Kevin

kristy88

Hm.. I must be doing something wrong. That doesn't seem to be working and my data no longer shows at all now:

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Jersey number:</td>'+
            '<td>'+d.tp_jersey_number+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td><img src="'+d.player_image+'"/></td>'+
        '</tr>'+
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#example').dataTable( {
         "ajax": {
            "url": "roster.json",
            // "dataType": "jsonp",
            "dataSrc": function ( json ) {
     for (i=0; i < json.SiteKit.Roster.length; i++) {
   var roster = json.SiteKit.Roster[i];
   if (roster.constructor === Array) {
      for (j=0; j < roster.length; j++) {
         tableData.push(roster[j]);
      }
   } else {
       tableData.push(roster);                           
   }
}
return tableData; }
        },
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "height" },
            { "data": "weight" },
            { "data": "birthdate" },
            { "data": "birthtown" },
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

kthorngren

I would start with putting some console.log statements in for debugging:

            "dataSrc": function ( json ) {
console.log(json);
     for (i=0; i < json.SiteKit.Roster.length; i++) {
   var roster = json.SiteKit.Roster[i];
console.log('i loop', roster);
   if (roster.constructor === Array) {
      for (j=0; j < roster.length; j++) {
       console.log('j loop', roster);
         tableData.push(roster[j]);
      }
   } else {
       tableData.push(roster);                          
   }
}
return tableData; }

This way you can see what the data is and maybe where the error is.

Kevin