Search Box (list web part) Error: TypeError: Unable to get property 'split' of undefined or null reference

Question

Team,

When I attempt to use the search box in a list web part I get the error, "TypeError: Unable to get property 'split' of undefined or null reference"

Setup:

On a Sharepoint 2016 page, I have the following...

1 - List web part #1 is a list of teams. Column A = "Team Name", Column B = "Aliases" (other references that team can be known by).

2 - Display search box is checked for list web part #1 (Edit Web Part / Miscellaneous)

3 - List web part #2 is an on-call roster - showing which team member is rostered on right now.

4 - I have a script editor web part (see below) which performs two filters on the on-call list (#2), (a) filter by time of day and (b) highlight people flagged unavailable.

Symptoms:

i - When the script editor web part (4) is added to the page and I attempt to use the search box (2) on the team list (#1) to search for an alias, I get the error mentioned above.

ii - If I delete the script editor web part and use the search box, search works as expected.

iii - If I move the script below to ~sitecollection/SiteAssets/Scripts/sharepoint-filterdatetime-checkavailable.js and use the same URL noted here in the JS Link field in the on-call web part (#2), the search box works, but the script does not work (maybe a rendering sequence, URL issue, who knows?, I don't)

Any thoughts on this greatly appreciated.

Regards Michael

<script type="text/javascript">
//On-call Roster Filter
//JS Link URL "~sitecollection/SiteAssets/Scripts/sharepoint-filterdatetime-checkavailable.js"

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    OnPostRender: function(ctx) {

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
            // get today's date
            var today = new Date();

            // get the Start Date and Time          
            var startDateTime = rows[i]["StartDateTime"]; //static name "StartDateTime"  Format: 31/03/2018 7:00 AM
            var startDateTimeParts = startDateTime.split(" ");
            var startDate = (startDateTimeParts[0]); // date
            var startTime = (startDateTimeParts[1]); // time
            var startAMPM = (startDateTimeParts[2]); // time

            // Split startDate
            var startDateParts = startDate.split("/");
            var startDateYear = (startDateParts[2]); // Year
            var startDateMonth = (startDateParts[1]); // Month
            var startDateDay = (startDateParts[0]); // Day              

            // Split startTime
            var startTimeParts = startTime.split(":");
            if (startAMPM == "AM") {
                var startTimeHour = (startTimeParts[0]); // Hour
            } else {    
                var startTimeHour = +(startTimeParts[0]) + 12; // Add 12 to the hour figure if PM
            }
            var startTimeMinutes = (startTimeParts[1]); // Minute
            var startTimeSeconds = (startTimeParts[2]); // Seconds
            var startDateTimeValue = new Date(startDateYear,startDateMonth-1,startDateDay,startTimeHour,startTimeMinutes,0,0);

            // get the End Date and Time            
            var endDateTime = rows[i]["EndDateTime"]; //static name "EndDateTime" Format: 31/03/2018 7:00 AM
            var endDateTimeParts = endDateTime.split(" ");
            var endDate = (endDateTimeParts[0]); // date
            var endTime = (endDateTimeParts[1]); // time
            var endAMPM = (endDateTimeParts[2]); // time

            // Split endDate
            var endDateParts = endDate.split("/");
            var endDateYear = (endDateParts[2]); // Year
            var endDateMonth = (endDateParts[1]); // Month
            var endDateDay = (endDateParts[0]); // Day              

            // Split endTime
            var endTimeParts = endTime.split(":");
            if (endAMPM == "AM") {
                var endTimeHour = (endTimeParts[0]); // Hour
            } else {    
                var endTimeHour = +(endTimeParts[0]) + 12; // Add 12 to the hour figure if PM
            }               
            var endTimeMinutes = (endTimeParts[1]); // Minute
            var endTimeSeconds = (endTimeParts[2]); // Seconds
            var endDateTimeValue = new Date(endDateYear,endDateMonth-1,endDateDay,endTimeHour,endTimeMinutes,0,0);

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId); 

            var availableStatus = rows[i]["Available"]; // get Available status

            if (startDateTimeValue <= today && endDateTimeValue >= today) {
                if(availableStatus == "No"){
                    row.style.backgroundColor = '#ff5f5c'; //highlight row red if availability = no
                }

            } else {
                row.style.display = 'none'; // hide row
            }

        }
    }
}); 
});

</script>​

Answer 1

I suspect that StartDateTime or EndDateTime are null or empty. Step through debug it and I suspect that your data is not fully populated. You need to check for null or empty before your split.

Answer 2

Matthew,

My code did have a split for seconds, which was empty because the input did not include seconds. This was removed. Now all the variables have data. I then moved the script from a script edit web part to a JS Linked file to (a) remove the unexpected token error. So the script now works without errors.

I think, I'll closed this as resolved, and treat this as solved.