Unexpected end of JSON input

[wisconsinWildcat]

Here's what worked for me.   First, the calling event (this one happens to be triggered by page load):

function loadRolesTitleSelection() {
    $('#rolesTitle').find('option').remove().end();
    $('#rolesLocation').find('option').remove().end();
    $('#rolesTag').find('option').remove().end();
    $('#rolesTagCollection').empty();
    $( '#rolesCalcOutput').empty();
    console.log('loadRolesTitleSelection entered.');
    $.ajax({
        type: 'POST',
        url: '../../../components/json_getAllRoles.php',
        dataType: 'JSON',
        success: function(data) {
            var $optList = $('#rolesTitle');
            $optList.empty();
            $optList.append('<option selected="true" disabled>Choose Job</option>');
            $optList.prop('selectedIndex',0);
            $.each(data, function(i,val){ 
                $optList.append('<option value="'+data[i]['role']+'">'+data[i]['role']+'</option>');
            });
        },
        error: function(xhr, textStatus,errorThrown){
            console.log('Error in g_primary.js.loadRolesTitleSelection.',errorThrown);
            console.log(xhr);
            alert(errorThrown);
        }
    });
    $( '#rolesLocation' ).prop("disabled", true);
    $( '#rolesTag' ).prop("disabled", true);
    console.log('loadRolesTitleSelection exiting.');
}

and here is json_getAllRoles.php  (connect_database.php is simply a mysqli database connection include file):

<?php
    header('Content-Type: application/json');
    include_once( "connect_database.php" );
    $sql = "SELECT role FROM pkdb.uniqueroles ORDER BY role";
    $json = array();
    $result = mysqli_query( $dbhandle, $sql );
    while($row = mysqli_fetch_array($result)) {
        $temp = array( 
            'role' => $row["role"]
        );
        array_push( $json, $temp );
    }
    $jsonstring = json_encode($json);
    echo $jsonstring;
?>