Edit in JSFiddle

// declare variable to hold the data
var data = [];

// declare view model
var viewModel = {
    presidents: ko.observableArray(data)
};

// apply bindings
ko.applyBindings(viewModel);

// get presidents data from mysafeinfo api and load in to the view model
$(function () {
    $.ajax({
        type: "GET",
        url: 'https://mysafeinfo.com/api/data?list=presidents&format=json&case=lower&token=test',
        dataType: "json",
        success: function (data) {
        		// bind data
            viewModel.presidents(data);
            
            // initialize datatable
            $('#presidents').DataTable();
        }
    });
});

<table id="presidents">
    <thead>
        <tr style="font-weight: bold">
            <th align="left" width="50">ID</th>
            <th align="left" width="215">Name</th>
            <th align="left" width="200">Party</th>
            <th align="left">Term</th>
        </tr>
    </thead>
    <tbody data-bind="template: { foreach: presidents }">
        <tr>
            <td><span data-bind="text: id"></span></td>
            <td><span data-bind="text: fullname"></span></td>
            <td><span data-bind="text: party"></span></td>
            <td><span data-bind="text: terms"></span></td>
        </tr>
    </tbody>
</table>