Edit in JSFiddle

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

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

// apply bindings

// get presidents data from mysafeinfo api and load in to the view model
$(function () {
        type: "GET",
        url: 'https://mysafeinfo.com/api/data?list=presidents&format=json',
        dataType: "json",
        success: function (data) {
        <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>
    <tbody data-bind="template: { foreach: presidents }">
            <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>


External resources loaded into this fiddle: