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',
        dataType: "json",
        success: function (data) {
            viewModel.presidents(data);
        }
    });
});
<table>
    <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: nm"></span></td>
            <td><span data-bind="text: pp"></span></td>
            <td><span data-bind="text: tm"></span></td>
        </tr>
    </tbody>
</table>

              

External resources loaded into this fiddle: